Hero

Fills the viewport's height with copy on one side and a figure on the other, centered, and stacks them below a container width; the one-class form of a cover holding columns.

Example

View Code 
<header class="hero">
    <div>
        <h1>Build interfaces that read their own container</h1>
        <p>Fifteen layouts, one attribute vocabulary, no breakpoints.</p>
        <a href="#">Get started</a>
    </div>
    <img src="peak.jpg" alt="A snow ridge at first light">
</header>

When to use it

The opening of a landing page: a headline and a call to action on one side, a picture on the other, filling the first screen. Below the threshold the two become rows and the band grows to fit. Put the picture first or last as you want it read; data-side moves it without changing the source. The copy must not have an img, video, or picture as a direct child (it would be taken for a second figure).

Built from primitives

A cover centers one child in the viewport's height. Give it columns carrying data-center, and inside the columns a stack for the copy and a frame for the picture. The threshold on the columns is what turns the two halves into rows.

<header class="cover">
    <div class="columns" data-center data-threshold="lg" data-gap="lg" data-align="center">
        <div class="stack" data-gap="sm">
            <h1>Build interfaces that read their own container</h1>
            <p>Fifteen layouts, one attribute vocabulary, no breakpoints.</p>
            <a href="#">Get started</a>
        </div>
        <div class="frame" data-ratio="4/3">
            <img src="peak.jpg" alt="A snow ridge at first light">
        </div>
    </div>
</header>

The one-class form does the same in one element: a wrapping row whose lines are centered in the band's height. Its test measures both forms against each other.

Why this name

"Hero" is what designers have called the big opening image since the print era, and every framework since Bootstrap 2 has shipped one under that name. The split is the common form; a hero with no picture is a cover.

Attributes

Attribute Type Values Default Description
data-threshold enum 2xs, xs, sm, md, lg, xl, 2xl lg The container width below which copy and figure become rows.
data-gap enum none, xs, sm, md, lg, xl, 2xl, 3xl, xs-sm, xs-md, xs-lg, xs-xl, xs-2xl, xs-3xl, sm-md, sm-lg, sm-xl, sm-2xl, sm-3xl, md-lg, md-xl, md-2xl, md-3xl, lg-xl, lg-2xl, lg-3xl, xl-2xl, xl-3xl, 2xl-3xl lg Space between copy and figure.
data-ratio enum 1/1, 4/3, 3/2, 16/9, 21/9 4/3 The figure's aspect ratio.
data-align enum start, center, end, stretch, baseline center Vertical alignment of copy and figure when side by side.
data-side enum start, end Force the figure to the start or the end regardless of source order. Moves it visually only; reading order stays as written.

Children

  • > *: exactly 2. Exactly two: the copy and the figure (an img, video, or picture, or an element wrapping one); the copy (the body) must not have an img, video, or picture as a direct child (it would be taken for a second figure). A figure with a figcaption keeps its caption below the picture.

Tokens

Token Description
--yeti-cover-height The band's minimum block size.
--yeti-width-lg The default threshold.
--yeti-space-lg The default gap.
--yeti-space-sm The gap between the copy's children.
--yeti-text-sm Text size of the caption.
--yeti-color-text-muted The caption.
Internal tokens (may change between minor versions) - `--_yeti-gap` - `--_yeti-threshold` - `--_yeti-align` - `--_yeti-aspect`

Accessibility

  • When the hero is the page's opening, keep the h1 inside the copy. data-side changes where the figure sits, not where it is read.

Browser support

  • Used without guards: flexbox gap, aspect-ratio, object-fit, :has(), dvh units
  • Behind @supports: nothing

JavaScript

None. This component is CSS only.

Available since 7.0.0.