Navigation

 v0.0.4
Marketing blocks

Hero

The first screen: what it is, why it matters and one thing to do.

A hero is the first screen of a page: what this is, why it matters, and one thing to do about it. The words are a heading at its display size, which follows the width of the block, and a lead under it. Everything else is optional.

Hero

<section class="container-inline px-lg py-4xl" aria-labelledby="hero-title">  <div class="flex flex-col items-center gap-lg max-w(760) mx-auto text-center">    <a class="badge badge-raised badge-pill" href="#">New: preview comments      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">        <path d="M5 12h14M13 6l6 6-6 6" />      </svg>    </a>    <h1 class="heading heading-display" id="hero-title">Ship the web, quietly.</h1>    <p class="lead lead-lg max-w(560)">Atlas turns every push into a deployment with its own address, in fourteen regions, in under a minute.</p>    <div class="flex flex-wrap justify-center gap-sm">      <a class="btn btn-brand btn-lg" href="#">Start deploying</a>      <a class="btn btn-lg" href="#">Read the docs</a>    </div>    <p class="m(0) text-xs fg-text-muted">Free for personal projects. No card needed.</p>  </div></section>

Blocks are markup to copy. They take the page's own text color and size; the previews set fg-text-body text-sm on the body. Each block is a size container, so it reflows by its own width.

#What is in it

  • One measure, centered. max-w(760) mx-auto text-center on a column with gap-lg. The lead has its own, narrower measure, so its lines stay short under a wide title.
  • A display heading. heading heading-display is sized in container units: 2.5rem in a phone's column and 4.25rem in a wide one, with balanced lines at every size. The section is the container.
  • Two actions at most. The one you want is a btn-brand or a btn-primary; the other is a default or a quiet button. flex flex-wrap justify-center lets them stack on a narrow screen without a query.
  • A small line of reassurance. What it costs to try, in text-xs fg-text-muted.

The brand button is the system's one hued control. With a hero that uses it, nothing else on the first screen should.

#With a picture

A figure under the words, framed in a tray like a print in a mat. Give the image its ratio with --figure-ratio, so the page does not jump when it loads.

With a picture

<section class="container-inline px-lg py-4xl" aria-labelledby="hero-media-title">  <div class="flex flex-col items-center gap-lg max-w(760) mx-auto text-center">    <p class="eyebrow">Deployments</p>    <h1 class="heading heading-display" id="hero-media-title">Every push gets an address.</h1>    <p class="lead max-w(520)">Open a pull request and share the link. What you review is what ships.</p>    <div class="flex flex-wrap justify-center gap-sm">      <a class="btn btn-primary btn-lg" href="#">Start deploying</a>      <a class="btn btn-quiet btn-lg" href="#">See how it works        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">          <path d="M5 12h14M13 6l6 6-6 6" />        </svg>      </a>    </div>  </div>  <figure class="figure figure-framed max-w(1040) mx-auto mt-3xl">    <img class="figure-media" src="/demo/moonstone.svg" alt style="--figure-ratio: 16 / 8">  </figure></section>

#Split

From 64rem of block the words and the picture stand side by side: grid-cols(2)@container(--5xl). Below that they stack, words first. The start column aligns to the start, which suits a form: here the action is an email field and its button, and under them three reassurances as bullets set in a wrapping row.

Split

<section class="container-inline px-lg py-4xl" aria-labelledby="hero-split-title">  <div class="grid gap-2xl items-center max-w(1120) mx-auto grid-cols(2)@container(--5xl)">    <div class="flex flex-col items-start gap-lg">      <p class="eyebrow">Analytics</p>      <h1 class="heading heading-display" id="hero-split-title">Know what is slow before your visitors do.</h1>      <p class="lead max-w(480)">Real traffic and real speed, measured at the edge. No cookies and no banner to dismiss.</p>      <form class="flex flex-wrap gap-xs w-full max-w(420)">        <input class="input grow(1) basis(200)" type="email" name="email" placeholder="you@example.com" aria-label="Email" autocomplete="email" required>        <button class="btn btn-primary">Get early access</button>      </form>      <ul class="bullets bullets-check flex flex-wrap col-gap-md row-gap-2xs text-xs fg-text-muted">        <li class="bullets-item">No card needed</li>        <li class="bullets-item">14 regions</li>        <li class="bullets-item">Cancel any time</li>      </ul>    </div>    <figure class="figure figure-framed">      <img class="figure-media" src="/demo/moonstone.svg" alt style="--figure-ratio: 4 / 3">    </figure>  </div></section>

#Accessibility

  • The hero's title is the page's <h1>. A page has one.
  • An eyebrow is a <p>, not a heading: it says what kind of thing follows, and a screen reader's list of headings should start with the title.
  • Buttons that go somewhere are links, <a class="btn">. Buttons that submit are <button>.
  • Each section is named by its title with aria-labelledby.
  • Describe the picture in alt when it shows the product; leave it empty when it is atmosphere. The picture in these examples is atmosphere, so its alt is empty.
  • A lone field has an aria-label, and required lets the browser say what is missing before anything is sent.