Hero statement

A single oversized sentence, broken into deliberate lines, occupying most of the first viewport with almost nothing else.

Grade: ARuntimes: css · gsapStatus: code-only

Documented, no live demo yet — the code below is complete.

Intent

The first screen has one job: say the thing. A hero statement removes the sub-headline, the two CTAs, and the product shot, and spends the entire budget on one sentence set large enough that it is a graphic element rather than a label. What it gives up in information density it recovers in being remembered.

Implementation

Line wrappers are inline spans, so the accessible name of the heading is still the complete sentence.

Dependencies: none

html-css-js

<header class="hero">
  <p class="t-caption hero__eyebrow">Independent studio — Est. 2019</p>

  <h1 class="t-display hero__statement">
    <span class="hero__line">We build the</span>
    <span class="hero__line">part of the internet</span>
    <span class="hero__line">people remember.</span>
  </h1>

  <p class="t-caption hero__scroll" aria-hidden="true">Scroll</p>
</header>

<style>
.hero {
  min-height: 88svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-lg);
  padding: var(--space-lg) var(--gutter);
}

.hero__eyebrow {
  justify-self: end;
  opacity: 0.55;
}

.hero__statement {
  align-self: center;
  margin: 0;
  text-wrap: pretty;
}

/* Inline-block gives each line its own box for animation without
   turning the sentence into separate blocks for assistive tech. */
.hero__line {
  display: inline-block;
}

.hero__scroll {
  justify-self: start;
  opacity: 0.55;
}
</style>

Use it when

Studio, agency, product-launch, and portfolio landing pages.
When you have one claim worth the whole screen and the confidence to make it.

Avoid it when

When users arrive needing to accomplish a task — a support portal, a checkout, an app dashboard.
When the sentence is longer than about twelve words. If it does not fit in three lines, it is not a hero statement.

Accessibility

The visible line breaks are presentational: keep the full sentence readable as one string to assistive tech by using inline `<span>` wrappers, not separate block elements with hidden text.
Exactly one `<h1>` per page.
The scroll affordance must not be the only way to proceed — the page must still scroll by keyboard and wheel.

Performance

Preload the display font and set `font-display: swap` — the hero is the Largest Contentful Paint element on almost every page that uses it.
Do not animate the hero before fonts load, or the reveal plays against a fallback face.

Knobs

lines: Number of manual line breaks. Default: 3
min height: Hero block height. Default: 88svh

Composition

Pairs with

Conflicts with

None.

Instruction for Claude Code

Build a hero section that is 88svh tall with a three-row grid: an eyebrow caption aligned to the right edge, one h1 hero statement centred vertically, and a scroll label at the bottom left. The h1 holds a single sentence split into inline-block spans so the accessible name stays intact. Use --fs-display, 0.9 leading, and -0.03em tracking. Do not add CTA buttons, a sub-headline, or a product image.