Hero with Carousel

Present key information to users supported by a carousel

npm run add Hero

Use the Hero component to display a hero section with a carousel of images and list items. They’re space efficient and can be used to highlight key information to your users.

Preview

New Hero components

Ship Faster

Production-ready, beautifully crafted components

Browse Components -> Pricing

★★★★★ 123 devs already building faster

• 
• 
• 

---
const heroProps = { ... } // See the Hero documentation for more info
const carousel = {
    items: 3,
    pagination: {
        type: 'dots'
    }
}
---

<Hero {...heroProps} carousel={carousel}>
    <li>
        <img
            src="/img/hero-slide1.png"
            alt="Hero slide"
            width="500"
            height="250"
        />
    </li>
    <li>...</li>
    <li>...</li>
</Hero>

To define a carousel, you can use the carousel prop that accepts an object in the form of CarouselProps. Make sure you pass carousel.items to configure the number of slides in the carousel. You can set the slides by passing them as children to the Hero component.

If the Hero component defines both a carousel and image prop, the carousel prop will take precedence.

Carousel Configuration

If you need to configure the carousel, you can pass those props to the carousel object. For example, you can use the subText prop to display a label under the slides. Use the {0} and {1} placeholders to display the current slide and total number of slides.

Hero with dynamic carousel label

New Hero components

Ship Faster

Production-ready, beautifully crafted components

Browse Components -> Pricing

★★★★★ 123 devs already building faster

• 
• 
• 

Slide 1 of 3

---
const heroProps = { ... }
const carousel = {
    items: 3,
    subText: 'Slide {0} of {1}',
}
---

<Hero {...heroProps} reverse={true} carousel={carousel}>
    ...
</Hero>

Lists

You can also pass an icon list using the list prop that accepts an object in the form of IconListProps. The list will be rendered at the bottom of the hero section, and can be used to highlight key information to your users.

Hero with carousel and list

New Hero components

Ship Faster

Production-ready, beautifully crafted components

Browse Components -> Pricing

★★★★★ 123 devs already building faster

• Easy to integrate
• Responsive and mobile-ready
• Customizable themes

• 
• 
• 

---
const heroProps = { ... }
const list = {
    color: 'var(--w-color-info)',
    items: [
        {
            icon: 'circle-check',
            text: 'Easy to integrate'
        },
        {
            icon: 'circle-check',
            text: 'Responsive and mobile-ready'
        },
        {
            icon: 'circle-check',
            text: 'Customizable themes'
        }
    ]
}
---

<Hero {...heroProps} list={list}>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</Hero>

API

type Props = {
    carousel?: CarouselProps
    list?: IconListProps
} & HeroProps