Skip to content

Hero

Stable Available in release assets

Introduce one page promise and its next actions without displacing the document heading hierarchy.

Hero in context

Show code
<section class="thin-hero" aria-labelledby="hero-title">
  <div class="thin-hero-copy">
    <p>Independent publishing</p>
    <h1 id="hero-title">Stories that travel farther than the feed</h1>
    <p>Long-form reporting, field notes, and conversations delivered without an algorithm deciding what matters.</p>
    <p class="thin-hero-actions">
      <a  href="#subscribe">Read independently</a>
      <a href="#latest">Browse the latest issue</a>
    </p>
  </div>
  <figure class="thin-hero-media" data-media-missing>
    <figcaption>Featured story image unavailable. Read the complete story below.</figcaption>
  </figure>
</section>

Each authored example uses the production assets and includes copyable markup.

Missing media fallback

Authored fallback copy remains visible when featured media is unavailable.

Show code
<section class="thin-hero" aria-labelledby="hero-title">
  <div class="thin-hero-copy">
    <p>Independent publishing</p>
    <h1 id="hero-title">Stories that travel farther than the feed</h1>
    <p>Long-form reporting, field notes, and conversations delivered without an algorithm deciding what matters.</p>
    <p class="thin-hero-actions">
      <a  href="#subscribe">Read independently</a>
      <a href="#latest">Browse the latest issue</a>
    </p>
  </div>
  <figure class="thin-hero-media" data-media-missing>
    <figcaption>Featured story image unavailable. Read the complete story below.</figcaption>
  </figure>
</section>

Copy only

The page promise and actions remain complete without optional media.

Show code
<section class="thin-hero" aria-labelledby="hero-copy-only">
  <div class="thin-hero-copy">
    <p>Independent publishing</p>
    <h1 id="hero-copy-only">Stories that travel farther than the feed</h1>
    <p>Long-form reporting delivered without an algorithm deciding what matters.</p>
    <p class="thin-hero-actions"><a href="#subscribe">Read independently</a></p>
  </div>
</section>

Copy with image

Featured media sits beside copy without displacing the page heading.

Show code
<section class="thin-hero" aria-labelledby="hero-image">
  <div class="thin-hero-copy">
    <p>Independent publishing</p>
    <h1 id="hero-image">Stories that travel farther than the feed</h1>
    <p class="thin-hero-actions"><a href="#subscribe">Read independently</a></p>
  </div>
  <figure class="thin-hero-media">
    <img src="hero.jpg" alt="Readers reviewing a printed field edition">
  </figure>
</section>

Copy with poster-first video

Poster-first video uses the separate video-embed component, which remains preview.

Show code
<section class="thin-hero" aria-labelledby="hero-video">
  <div class="thin-hero-copy">
    <p>Independent publishing</p>
    <h1 id="hero-video">Stories that travel farther than the feed</h1>
    <p class="thin-hero-actions"><a href="#latest">Browse the latest issue</a></p>
  </div>
  <figure class="thin-hero-media">
    <div class="thin-video-embed-pattern" data-video-title="Field edition trailer">
      <img src="poster.jpg" alt="Poster for the field edition trailer">
      <button type="button" data-video-activate>Play trailer</button>
    </div>
  </figure>
</section>

Anatomy

  • Section with accessible heading
  • Eyebrow
  • Single h1
  • Supporting copy
  • Action links
  • Optional image, video, or missing-media fallback

Variants and sizes

  • Copy only — shown above
  • Copy with image — shown above
  • Copy with poster-first video — shown above
  • Missing media — shown above

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

  • Long localized headline
  • Missing media
  • Narrow container
  • Wide container
  • Reduced motion

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Calls to action are ordinary links; video uses the separate poster-first video component and never autoplays as part of Hero.

Accessibility

Keep one page-level h1, associate the section with its heading when needed, write useful image alternatives, and preserve a visible destination when media fails.

Contract
COMPOSE
Basis
Composition of native landmarks, headings, lists, links, and forms; no APG widget

API

Use section.thin-hero, hero-copy, hero-actions, and optional hero-media. Add data-media-missing to an authored fallback, never as a script-only state. Poster-first video composes with video-embed, which remains preview.

Behavior tier: css-only

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Landmarks, headings, links, media, disclosure, and native forms remain useful in normal document flow without CSS or JavaScript.

Assets and dependencies

  • /foundation.css
  • /layouts.css
  • /components.css
  • /patterns/marketing.css
  • /icons/sprite.svg

Dependencies: None

Source: packages/ui/src/items/marketing/style.ts

Stability evidence

  • Landmarks, heading order, native action links, and no-JavaScript contract: test:tests/unit/library/marketing-patterns.test.ts
  • Complete item-specific API, fallback, difficult states, and preview composition honesty: test:tests/unit/library/composition-stable.test.ts
  • Cross-theme, density, narrow-container, zoom, and forced-colors fixture: review:site/src/pages/quality/index.astro#quality-review