Hero19
Hero19 is a responsive and customizable Hero Section component for landing pages or feature highlights. It displays a featured image alongside optional text content such as a tagline, headline, description, bullet list, and call-to-action buttons.
All available props for the Hero19 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/Hero19.tsx
Component usage path: src/app/blocks/hero/hero19/page.tsx
Preview link: https://www.saasable.io/blocks/hero/hero19
Props Details
image
ImageCommonProps
Graphic shown on the left side.
{ src: '/images/hero-graphic.png', alt: 'Hero Section Graphic' }
tagline
string
Short label or slogan above the headline.
"Built for Developers"
headLine
{ image: string | ImageComponentProps }[]
Main bold title or heading.
"Simplify Your Workflow with Our API"
description
string
Supporting text under the headline.
"Our RESTful API gives you full control, fast integration, and endless power."
list
Array<{ primary: string }> (optional)
A bullet list rendered with checkmark icons, each primary is one list item.
Shown as a List with icons and secondary text
primaryBtn
ButtonProps
Props for the primary call-to-action button (filled style).
As a "contained" MUI Button
secondaryBtn
ButtonProps
Props for the secondary call-to-action button (outlined style).
As an "outlined" MUI Button
Last updated