Hero8
The Hero8 component displays a hero section with a headline, caption, optional primary button, and a responsive image. It includes a grid layout for a list of items, each featuring a counter and caption, with responsive adjustments for different screen sizes.
All available props for the Hero8 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/Hero8.tsx
Component usage path: src/app/blocks/hero/hero8/page.tsx
Preview link: https://www.saasable.io/blocks/hero/hero8
Props Details
headLine
ReactElement
Main headline text
<Typography variant="h1">Our Key Features</Typography>
captionLine
string
Subtitle or descriptive text
"Discover the key features that make our product unique."
primaryBtn
ButtonProps (Optional)
Optional properties for the primary button.
{ variant: "contained", color: "primary", children: "Learn More" }
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 data objects for the grid
[{ counter: "10", caption: "Years in Business", defaultUnit: "years" }, ...]
Last updated