Hero

Present key information to your users

npm create webcore@latest add Hero

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

★★★★★ 123 students already enrolled

<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'
    }}
    avatarWithRating={{
        avatar: { img: avatarGroup },
        rating: { score: 5, color: 'var(--w-color-success)' },
        text: '<b>123 students</b> already enrolled'
    }}
    image={{
        src: '/img/banner.png',
        alt: 'Banner',
        width: 500,
        height: 250
    }}
/>

Apart from the heading prop, all props are optional to make it possible to create hero sections with a wide range of options. The above Hero component was created with the following props:

• badge: A badge can be added above the title using the badge prop. The badge object can take the props of a Badge component, along with a text property that defines the text inside the badge.
• 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 available icon types or import and pass an SVG string.
• avatarWithRating: To display avatars with a rating under the CTA buttons, specify the avatarWithRating prop that accepts an object in the form of AvatarWithRatingProps.
• 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

★★★★★ 123 students already enrolled

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

API

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