Hero

The town masthead — identity, one-line welcome, search, and the tasks people actually came for.

Official town website

Town of Riverbend

A river town, incorporated 1838.

Show the markup

<section class="cc-hero" aria-label="Welcome">
  <div class="cc-hero__content">
    <p class="cc-hero__kicker">Official town website</p>
    <h3 class="cc-hero__title">Town of Riverbend</h3>
    <hr class="cc-hero__rule" aria-hidden="true">
    <p class="cc-hero__tagline">A river town, incorporated 1838.</p>
    <form class="cc-hero__search" role="search">
      <label class="cc-visually-hidden" for="ex-hero-q">Search this site</label>
      <input id="ex-hero-q" type="search">
      <button type="submit">Search</button>
    </form>
    <nav class="cc-hero__tasks" aria-label="Popular tasks">
      <a href="#">Dog licenses</a>
      <a href="#">Property taxes</a>
      <a href="#">Vital records</a>
    </nav>
  </div>
</section>

Official town website

Town of Riverbend

A river town, incorporated 1838.

Show the markup

<section class="cc-hero cc-hero--image" aria-label="Welcome">
  <img class="cc-hero__bg" src="https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=1600&q=80" alt="">
  <div class="cc-hero__scrim" aria-hidden="true"></div>
  <div class="cc-hero__content">
    <p class="cc-hero__kicker">Official town website</p>
    <h3 class="cc-hero__title">Town of Riverbend</h3>
    <hr class="cc-hero__rule" aria-hidden="true">
    <p class="cc-hero__tagline">A river town, incorporated 1838.</p>
    <nav class="cc-hero__tasks" aria-label="Popular tasks">
      <a href="#">Dog licenses</a>
      <a href="#">Property taxes</a>
    </nav>
  </div>
</section>

Official town website

Town of Riverbend

A river town, incorporated 1838.

Show the markup

<section class="cc-hero cc-hero--band" aria-label="Welcome">
  <div class="cc-hero__content">
    <p class="cc-hero__kicker">Official town website</p>
    <h3 class="cc-hero__title">Town of Riverbend</h3>
    <hr class="cc-hero__rule" aria-hidden="true">
    <p class="cc-hero__tagline">A river town, incorporated 1838.</p>
    <nav class="cc-hero__tasks" aria-label="Popular tasks">
      <a href="#">Dog licenses</a>
      <a href="#">Property taxes</a>
    </nav>
  </div>
</section>

Official town website

Town of Riverbend

A river town, incorporated 1838.

Show the markup

<section class="cc-hero cc-hero--band cc-hero--split" aria-label="Welcome">
  <div class="cc-hero__content">
    <div class="cc-hero__body">
      <p class="cc-hero__kicker">Official town website</p>
      <h3 class="cc-hero__title">Town of Riverbend</h3>
      <p class="cc-hero__tagline">A river town, incorporated 1838.</p>
      <form class="cc-hero__search" role="search">
        <label class="cc-visually-hidden" for="ex-hero-split-q">Search this site</label>
        <input id="ex-hero-split-q" type="search">
        <button type="submit">Search</button>
      </form>
      <nav class="cc-hero__tasks" aria-label="Popular tasks">
        <a href="#">Dog licenses</a>
        <a href="#">Property taxes</a>
      </nav>
    </div>
    <img class="cc-hero__figure" src="https://images.unsplash.com/photo-1449824913935-59a10b8d2000?w=1200&q=80" alt="">
  </div>
</section>

Accessibility

On a real page the title is the h1; the kicker is a paragraph, not a heading. (The examples use h3 to keep this page's outline honest.)
The band variant drops the card radius for edge-to-edge homepage mastheads and caps its content at the container measure; it composes with the image variant.
White text on brand-deep exceeds 7:1 in every theme; the accent rule is decorative.
Search is a labeled landmark with an always-visible submit button.
Task chips are a labeled nav of real links — 44px pills with visible focus.
The image variant lays a 94% --cc-band scrim over the photo, so white text holds 12:1 or better even where the photo is pure white, which is what makes the ≥7:1 claim true regardless of the image. The photo is decorative (alt="") and never carries information.
Split is the variant to reach for when the photograph is meant to be looked at. At 94% the scrim leaves a ghost — the honest cost of guaranteeing contrast over an image nobody has seen yet. Split sidesteps the trade: text on solid band, photo beside it, nothing dimmed and no contrast question to answer. The photo stays decorative.
Split divides inside __content, so the band keeps its container centering — the text's left edge and the photo's right edge land on the same measure as the header and the content below. It stacks to one column under 62rem, photo last.