Hero (hero)

🔗 External documentation.

ID Label Description Schema
title Title
lead Lead
illustration Illustration An image element 
            id: hero
label: Hero
homepage: 'https://design-system.w3.org/components/hero.html'
variants:
    default:
        id: default
        label: Default
    listing:
        id: listing
        label: Listing
slots:
    title:
        id: title
        label: Title
    lead:
        id: lead
        label: Lead
    illustration:
        id: illustration
        label: Illustration
        description: 'An image element'
examples:
    preview:
        id: preview
        label: Preview
        renderable:
            '@component': hero
            title: 'Hero title'
            lead: 'A very short introduction/summary of the page.'
            illustration:
                '@element': img
                src: 'https://www.w3.org/thumbnails/200/avatar-images/7mtpjeh4in8kw04ksso8ss4ocsksswo.webp'

Default ( default )

Hero title

A very short introduction/summary of the page.
<div class="hero u-full-width"> <div class="l-center"> <div class="l-sidebar"> <div> <div class="not-sidebar"> <h1>Hero title</h1> <p class="lead">A very short introduction&#x2f;summary of the page.</p> </div> <div class="sidebar"> <img src="https://www.w3.org/thumbnails/200/avatar-images/7mtpjeh4in8kw04ksso8ss4ocsksswo.webp" /></div> </div> </div> </div> </div>

Listing ( listing )

Hero title

A very short introduction/summary of the page.
<div class="hero--listing hero u-full-width"> <div class="l-center"> <div class="l-sidebar"> <div> <div class="not-sidebar"> <h1>Hero title</h1> <p class="lead">A very short introduction&#x2f;summary of the page.</p> </div> <div class="sidebar"> <img src="https://www.w3.org/thumbnails/200/avatar-images/7mtpjeh4in8kw04ksso8ss4ocsksswo.webp" /></div> </div> </div> </div> </div>