SaasAble Documentation
UI-Kit - V1.2.0
UI-Kit - V1.2.0
  • Getting Started
    • Prerequisites
    • Setup
    • Deployment
  • Development
    • Folder structure
    • Routing
    • Env Variables
    • Dependencies
    • SEO - Metadata
    • Favicon
    • MailerLite
    • Error Handling
    • Analytics
    • Branding
    • Components
      • About
        • About 1
        • About 2
        • About 3
      • Auth
        • Login
          • Login1
          • Login2
          • Login3
          • Login4
          • Login5
        • Forgot Password
        • New Password
        • OTP Verification
        • Register
      • Benefit
        • Benefit1
        • Benefit2
        • Benefit3
        • Benefit4
        • Benefit5
        • Benefit6
        • Benefit7
        • Benefit8
        • Benefit9
      • Blog
        • Blog1
        • Blog2
        • Blog3
        • Blog4
        • Blog5
        • Blog6
        • Blog7
      • Clientele
        • Clientele1
        • Clientele2
        • Clientele3
        • Clientele4
        • Clientele5
        • Clientele6
        • Clientele7
      • Contact-us
        • ContactUs1
        • ContactUs2
        • ContactUs3
        • ContactUs4
        • ContactUs5
        • ContactUs6
      • Cookie
        • Cookie1
        • Cookie2
        • Cookie3
      • Cta
        • Cta1
        • Cta2
        • Cta3
        • Cta4
        • Cta5
        • Cta6
        • Cta7
        • Cta8
        • Cta9
        • Cta10
        • Cta11
        • Cta12
      • Faq
        • Faq1
        • Faq2
        • Faq3
        • Faq4
        • Faq5
        • Faq6
        • Faq7
        • Faq8
      • Feature
        • Feature1
        • Feature2
        • Feature3
        • Feature4
        • Feature5
        • Feature6
        • Feature7
        • Feature8
        • Feature9
        • Feature10
        • Feature11
        • Feature12
        • Feature13
        • Feature14
        • Feature15
        • Feature16
        • Feature17
        • Feature18
        • Feature19
        • Feature20
        • Feature21
        • Feature22
        • Feature23
        • Feature24
        • Feature25
      • Footer
      • Gallery
        • Gallery1
        • Gallery2
        • Gallery3
        • Gallery4
      • Hero
        • Hero1
        • Hero2
        • Hero3
        • Hero4
        • Hero5
        • Hero6
        • Hero7
        • Hero8
        • Hero9
        • Hero10
        • Hero11
        • Hero12
        • Hero13
        • Hero14
        • Hero15
        • Hero16
        • Hero17
      • Integration
        • Integration1
        • Integration2
        • Integration3
        • Integration4
        • Integration5
        • Integration6
        • Integration7
        • Integration8
      • maintenance
        • Error404
      • MegaMenu
        • MegaMenu1
        • MegaMenu2
        • MegaMenu3
        • MegaMenu4
        • MegaMenu5
      • Navbar
        • NavMenu
        • Navbar-content
          • NavbarContent1
          • NavbarContent2
          • NavbarContent3
          • NavbarContent4
          • NavbarContent5
          • NavbarContent6
          • NavbarContent7
          • NavbarContent8
          • NavbarContent9
          • NavbarContent10
        • Navbar1
        • Navbar2
        • Navbar3
        • Navbar4
        • Navbar5
        • Navbar6
        • Navbar7
        • Navbar8
        • Navbar9
        • Navbar10
      • Other
        • Other1
        • Other2
        • Other3
      • Pricing
        • Pricing1
        • Pricing2
        • Pricing3
        • Pricing4
        • Pricing5
        • Pricing6
        • Pricing7
        • Pricing8
        • Pricing9
      • Process
        • Process1
        • Process2
        • Process3
        • Process4
        • Process5
        • Process6
        • Process7
      • SmallHero
        • SmallHero1
        • SmallHero2
        • SmallHero3
        • SmallHero4
        • SmallHero5
        • SmallHero6
        • SmallHero7
      • Team
        • Team1
        • Team2
        • Team3
        • Team4
        • Team5
        • Team6
        • Team7
        • Team8
      • Testimonial
        • Testimonial1
        • Testimonial2
        • Testimonial3
        • Testimonial4
        • Testimonial5
        • Testimonial6
        • Testimonial7
        • Testimonial8
        • Testimonial9
        • Testimonial10
        • Testimonial11
      • TopOffer
        • TopOffer1
        • TopOffer2
        • TopOffer3
        • TopOffer4
        • TopOffer5
      • ComingSoon
      • EarlyAccess
      • Onboard
  • Theming
    • Color
    • Typography
      • Font Family
    • Icon
      • Tabler
      • Custom/two tone
  • Global
    • Config
    • Styles
    • Component overrides
Powered by GitBook
On this page
  1. Development
  2. Components
  3. Feature

Feature11

PreviousFeature10NextFeature12

The Feature11 component presents a section with a heading and optional caption, followed by an optional image inside a GraphicsCard. Below the image, a grid of animated IconCard components displays feature details.

All available props for the Feature11 component are defined and handled within Component usage path file. This allows for easy modifications to the content of the feature section.

Component path: src/blocks/feature/Feature11.tsx

Component usage path: src/app/blocks/feature/feature11/page.tsx

Preview link:

Props Details

Prop
Type
Description
Displayed as

heading

string

Main heading for the feature section

"Our Key Features"

caption

string (Optional)

Additional context or description under the heading.

"Discover the features that will transform your customer relationships"

image

ImageCommonProps (Optional)

Image path or object with light and dark image path.

"path-to-image.svg" or { light: 'path-to-image-light.svg', dark: 'path-to-image-dark.svg' }

features

IconCardProps[]

Array of feature details to display

[ { icon: 'icon-name1', title: 'Feature 1', content: 'Description of Feature 1', animationDelay: 0.3 }, ... ]

showBorder

boolean (Optional)

Optional prop for display border around image.

Default it will show border around image.

https://www.saasable.io/blocks/feature/feature11