Hero9
The Hero9 component creates a visually engaging hero section with a background featuring dotted patterns, a central content area with a chip label, headline, caption, and a call-to-action button, and a list of icons with titles. It also includes an image with a styled border and radius.
All available props for the Hero9 component are defined and handled within Component usage path file. This allows for easy modifications to the content of the hero section.
Component path: src/blocks/hero/Hero9.tsx
Component usage path: src/app/blocks/hero/hero9/page.tsx
Preview link: https://www.saasable.io/blocks/hero/hero9
Props Details
chip
{ label: ChipProps['label'] }
Chip component with a label, either a string or custom element
{ label: 'New Feature' }
headLine
string
Main headline text
"Discover Our Latest Innovations"
captionLine
string
Secondary descriptive text
"Explore the cutting-edge features that are redefining the industry."
primaryBtn
ButtonProps
Properties for the primary button, including text and event handlers
{ variant: "contained", color: "primary", children: "Get Started" }
image
ImageCommonProps
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' }
listData
ListDataProps[]
Array of items with icons and titles to display
[{ icon: "tabler-heart", title: "Loved by Users" }, { icon: "tabler-star", title: "Highly Rated" }]
Last updated