Hero

An opening section that sets the tone. A media layer with a scrim keeps the text readable, the title is oversized and rises line by line, and the content can share the stage with a live component in the aside. Everything is CSS; the media can be an image, a video or a gradient, and the cinematic variant adds an aurora, a scan line and sparks from the surfaces and effects modules.

CSS: css/components/hero.css (in ivolt.css). No JavaScript. Added in v0.4.

A hero with its actionsfixtures/hero/basic.htmlOpen alone

<section class="iv-hero iv-hero--kenburns" id="hero-basic">
  <div class="iv-hero__media" aria-hidden="true" style="background-image: radial-gradient(70% 90% at 12% 6%, var(--iv-palette-green-800) 0 10%, transparent 70%), radial-gradient(60% 80% at 92% 0%, var(--iv-palette-blue-600) 0 8%, transparent 66%), linear-gradient(160deg, var(--iv-palette-neutral-950), var(--iv-palette-neutral-900))"></div>
  <div class="iv-hero__scrim" aria-hidden="true"></div>
  <div class="iv-hero__content">
    <p class="iv-hero__kicker">Sample fixture, not a real product</p>
    <h2 class="iv-hero__title">
      <span class="iv-rise" style="--iv-i: 0">Interfaces that</span>
      <span class="iv-rise" style="--iv-i: 1">arrive <em>already lit</em></span>
    </h2>
    <p class="iv-hero__lead iv-rise" style="--iv-i: 2">Made-up copy, for the fixture only. The background is a gradient layer, the scrim keeps the text at AA in both themes, and the title lines rise one after another.</p>
    <div class="iv-hero__actions iv-rise" style="--iv-i: 3">
      <a class="iv-button iv-button--primary iv-button--lg" href="#hero-basic-facts">See the sample numbers</a>
      <a class="iv-button iv-button--lg" href="#hero-basic">Back to the top of the hero</a>
    </div>
    <ul class="iv-hero__facts" id="hero-basic-facts">
      <li><strong>0</strong> runtime dependencies</li>
      <li><strong>18</strong> components (sample count)</li>
      <li><strong>2</strong> themes, one contract</li>
    </ul>
  </div>
</section>

.iv-root {
  --iv-i: 0;
}

Split with an aside

Split with an asidefixtures/hero/split.htmlOpen alone

<section class="iv-hero iv-hero--split" id="hero-split">
  <div class="iv-hero__media" aria-hidden="true" style="background-image: radial-gradient(64% 84% at 78% 4%, var(--iv-palette-green-900) 0 12%, transparent 72%), radial-gradient(70% 70% at 4% 96%, var(--iv-palette-blue-600) 0 6%, transparent 62%), linear-gradient(200deg, var(--iv-palette-neutral-1000), var(--iv-palette-neutral-900))"></div>
  <div class="iv-hero__scrim" aria-hidden="true"></div>
  <div class="iv-hero__content">
    <p class="iv-hero__kicker">Sample fixture, not a real product</p>
    <h2 class="iv-hero__title">
      <span class="iv-rise" style="--iv-i: 0">Two columns,</span>
      <span class="iv-rise" style="--iv-i: 1">one <em>cover</em></span>
    </h2>
    <p class="iv-hero__lead iv-rise" style="--iv-i: 2">Made-up copy, for the fixture only. From the medium breakpoint the hero becomes a grid of 1.2fr and 0.8fr; below it the aside simply follows the text.</p>
    <div class="iv-hero__actions iv-rise" style="--iv-i: 3">
      <a class="iv-button iv-button--primary iv-button--lg" href="#hero-split-aside">Jump to the panel</a>
    </div>
  </div>
  <aside class="iv-hero__aside" id="hero-split-aside">
    <article class="iv-card iv-glass iv-edge-near">
      <div class="iv-card__body">
        <span class="iv-badge iv-badge--info">Glass and proximity</span>
        <h2 class="iv-card__title">Release notes (sample)</h2>
        <p class="iv-u-m-0">Made-up content, for the fixture only. The panel is a card wearing <code>iv-glass</code> and <code>iv-edge-near</code>: move the pointer close to its border and the edge lights up where you are. Nothing here submits or navigates away.</p>
      </div>
      <div class="iv-card__footer">
        <a class="iv-button iv-button--sm" href="#hero-split">Back to the hero</a>
      </div>
    </article>
  </aside>
</section>

.iv-root {
  --iv-i: 0;
}

Cinematic

Aurora background, a scan line, sparks and a glint on the primary action. Under reduced motion the aurora is still and the scan and sparks stop.

Cinematic, with a conductor filletfixtures/hero/cinematic.htmlOpen alone

<section class="iv-hero iv-hero--cinematic iv-hero--center iv-scan" id="hero-cinematic" style="--iv-scan-opacity: 0.5">
  <div class="iv-hero__media iv-texture-aurora" aria-hidden="true"></div>
  <div class="iv-hero__scrim" aria-hidden="true"></div>
  <span class="iv-spark" style="--iv-i: 0; position: absolute; inset-block-start: 16%; inset-inline-start: 18%" aria-hidden="true"></span>
  <span class="iv-spark" style="--iv-i: 1; position: absolute; inset-block-start: 24%; inset-inline-start: 72%" aria-hidden="true"></span>
  <span class="iv-spark" style="--iv-i: 2; position: absolute; inset-block-start: 11%; inset-inline-start: 54%" aria-hidden="true"></span>
  <div class="iv-hero__content">
    <p class="iv-hero__kicker">Sample fixture, not a real product</p>
    <h2 class="iv-hero__title">
      <span class="iv-rise" style="--iv-i: 0">The cover that</span>
      <span class="iv-rise" style="--iv-i: 1">makes them <em>stay</em></span>
    </h2>
    <p class="iv-hero__lead iv-rise" style="--iv-i: 2">Made-up copy, for the fixture only. The aurora lives on the background layer, the scan line crosses the whole section, and the sparks are decorative. Everything stops when the visitor asks for reduced motion, and the final frame stays on screen.</p>
    <div class="iv-hero__actions iv-rise" style="--iv-i: 3">
      <a class="iv-button iv-button--primary iv-button--lg iv-edge-glint" href="#hero-cinematic-facts">Start the sample tour</a>
      <a class="iv-button iv-button--lg" href="#hero-cinematic">Back to the top of the hero</a>
    </div>
    <ul class="iv-hero__facts" id="hero-cinematic-facts">
      <li><strong>90svh</strong> of cover</li>
      <li><strong>6s</strong> per scan</li>
      <li><strong>0</strong> bitmaps shipped</li>
    </ul>
  </div>
</section>

.iv-root {
  --iv-scan-opacity: 0.5;
  --iv-i: 0;
}

Terminal

Monospace kicker with a prompt and a blinking cursor.

Terminalfixtures/hero/terminal.htmlOpen alone

<section class="iv-hero iv-hero--terminal iv-scan iv-scan--v" id="hero-terminal" style="--iv-scan-opacity: 0.5">
  <div class="iv-hero__media" aria-hidden="true" style="background-image: radial-gradient(58% 70% at 8% 100%, var(--iv-palette-green-900) 0 10%, transparent 68%), linear-gradient(180deg, var(--iv-palette-neutral-1000), var(--iv-palette-neutral-950))"></div>
  <div class="iv-hero__scrim" aria-hidden="true"></div>
  <div class="iv-hero__content">
    <p class="iv-hero__kicker">npx sample --not-a-real-command</p>
    <h2 class="iv-hero__title">
      <span class="iv-rise" style="--iv-i: 0">Ship the</span>
      <span class="iv-rise" style="--iv-i: 1">whole <em>stack</em></span>
    </h2>
    <p class="iv-hero__lead iv-rise" style="--iv-i: 2">Made-up copy, for the fixture only. The terminal cover sets the mono family on the content, prints a prompt before the kicker and blinks a caret after it. The caret stops blinking when the visitor asks for reduced motion.</p>
    <div class="iv-hero__actions iv-rise" style="--iv-i: 3">
      <a class="iv-button iv-button--primary iv-button--lg" href="#hero-terminal-facts">Read the sample output</a>
    </div>
    <ul class="iv-hero__facts" id="hero-terminal-facts">
      <li><strong>12ms</strong> sample build</li>
      <li><strong>3</strong> engines tested</li>
    </ul>
  </div>
</section>

.iv-root {
  --iv-scan-opacity: 0.5;
  --iv-i: 0;
}

With a photograph

A real image in the media layer with the slow zoom and a scan line.

With a photographfixtures/hero/photo.htmlOpen alone

<section class="iv-hero iv-hero--kenburns iv-scan" style="--iv-hero-min: 32rem; border-radius: var(--iv-radius-lg)">
  <div class="iv-hero__media"><img src="/photos/p1043.jpg" width="1280" height="800" alt="" loading="lazy"></div>
  <div class="iv-hero__scrim"></div>
  <div class="iv-hero__content">
    <p class="iv-hero__kicker">Photograph by Christian Joudrey on Unsplash</p>
    <h2 class="iv-hero__title"><span class="iv-rise" style="--iv-i: 0">Real light,</span><span class="iv-rise" style="--iv-i: 1">real <em>photographs</em></span></h2>
    <p class="iv-hero__lead">The media layer takes a real image; the scrim keeps the text on AA contrast; the slow zoom and the scan line stop under reduced motion. Sample copy for the documentation.</p>
    <div class="iv-hero__actions"><a class="iv-button iv-button--primary iv-button--lg iv-edge-glint" href="#hero-photo-note">Sample action</a><a class="iv-button iv-button--secondary iv-button--lg" href="#hero-photo-note">Another link</a></div>
  </div>
</section>
<p id="hero-photo-note" class="iv-u-text-sm iv-u-text-muted iv-u-m-0" style="margin-block-start: var(--iv-space-3)">Both buttons only jump to this note.</p>

.iv-root {
  --iv-hero-min: 32rem;
  --iv-i: 0;
}

Anatomy and modifiers

Class	Role
`iv-hero`	Full-bleed section, `--iv-hero-min` (80svh), content aligned to the bottom.
`__media`, `__scrim`	Background layer and the gradient that keeps text on AA contrast (`--iv-hero-scrim`).
`__content`, `__kicker`, `__title`, `__lead`, `__actions`, `__facts`, `__aside`	The text column and its parts; `__title > span.iv-rise` rise line by line.
`--center`, `--split`, `--cinematic`, `--terminal`, `--compact`, `--kenburns`, `--light`	Alignment, two columns, aurora with scan and sparks, monospace prompt, 50svh, slow zoom on the media, light scrim.

Accessibility

The title is the page heading; decorative media carry an empty alt; no video plays with sound; the scrim is tested with axe in both themes in every fixture.

Common mistakes

Text on media without the scrim: contrast depends on the picture.
A hero taller than the viewport on phones: use --compact or lower --iv-hero-min.
Autoplaying video with sound: never.

Class index

Parts and modifiers of this family that the examples above do not show. The full list per stylesheet lives in the reference.

Class	What it does
`iv-hero--center`	Centres the text column and the actions.
`iv-hero--cinematic`	Taller opening with the scrim and the deeper vertical rhythm.
`iv-hero__aside`	Secondary column of the hero: a card, a form, a still.
`iv-hero__facts`	Row of short facts under the actions.

Every content component

Every interactive component

Navigate