Hero Sections

Present key information to your users

Use the Hero component to build visually appealing hero sections that help capture your users attention. They create a strong first impression with bold visuals, typography, and call-to-actions. Use them to highlight key messages, product features, or promotions.

Preview

New releases

Hero section title

Subtitle for hero section

Get Started -> Contact

<Hero
    heading="Hero section title"
    subHeading="Subtitle for hero section"
    buttons={[
        { text: 'Get Started ->', theme: 'success' },
        { text: 'Contact', theme: 'secondary', icon: 'info' }
    ]}
    badge={{
        rounded: true,
        theme: 'outline',
        text: 'New releases'
    }}
    image={{
        src: '/img/banner.png',
        alt: 'Banner',
        width: 500,
        height: 250
    }}
/>

The above Hero component was created with the following props:

• title: The Hero component must have a title, set through the title prop.
• subTitle: Hero sections can also have an optional subtitle.
• buttons: You can create CTA buttons by defining a buttons prop that takes in an array of buttons. Each button object can have the props of a Button component, along with a text and icon props that defines the text and icon of the button. Use the icon property as the string to specify icons for Astro components, or import and pass an SVG string for Svelte/React components. For available icon types, see the documentation of the Icon component.
• badge: A badge can also be added above the title using the badge prop. A badge object can take the props of a Badge component, along with the text prop that defines the text inside the badge.
• image: Lastly, you can also define a featured image. Images must have a src, alt, width, and height attributes in order to be accessible.

Alternative Layout

The layout of hero sections can be modified using the reverse prop to create an alternative layout:

Hero with reverse layout

New releases

Hero section title

Subtitle for hero section

Get Started -> Contact

<Hero
    heading="Hero section title"
    subHeading="Subtitle for hero section"
    buttons={[ ... ]}
    badge={{ ... }}
    image={{ ... }}
    reverse={true}
/>

API

type HeroProps = {
    heading: string
    subHeading?: string
    buttons?: ({
        text: string
        icon?: IconProps['type'] | string
    } & ButtonProps)[]
    badge?: {
        text: string
    } & BadgeProps | null
    image?: {
        src: string
        alt: string
        width: number
        height: number
    } | null
    reverse?: boolean
}