Navigation

 v0.0.4
Marketing blocks

Features

What the product does, as a grid of short claims.

A features block says what the product does as a grid of short claims: a mark, a few words in ink, one sentence. The grid goes from one column to two to three by the block's own width.

Features

<section class="container-inline px-lg py-4xl" aria-labelledby="features-title">  <div class="flex flex-col gap-2xl max-w(1040) mx-auto">    <header class="flex flex-col gap-sm max-w(560)">      <p class="eyebrow">Platform</p>      <h2 class="heading heading-2xl" id="features-title">Everything between a push and a page.</h2>      <p class="lead">Atlas is the part you would rather not build: the pipeline, the network and the certificates.</p>    </header>    <ul class="grid gap-xl row-gap-2xl m(0) p(0) grid-cols(2)@container(--2xl) grid-cols(3)@container(--5xl)">      <li class="flex flex-col gap-xs">        <span class="well flex items-center justify-center w(36) h(36) fg-text-strong">          <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 14c0-5 4-10 11-10 0 7-5 11-10 11zM5 14l-2 1 1 3M10 19l-1 2-3-1M14.5 9.5h.01" />          </svg>        </span>        <h3 class="heading heading-sm mt-xs">Deploy on every push</h3>        <p class="m(0) leading-md">A preview for each branch and production from main, with nothing to configure.</p>      </li>      <li class="flex flex-col gap-xs">        <span class="well flex items-center justify-center w(36) h(36) fg-text-strong">          <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="M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" />          </svg>        </span>        <h3 class="heading heading-sm mt-xs">Fourteen regions</h3>        <p class="m(0) leading-md">Requests are answered from the region nearest the visitor, on our network.</p>      </li>      <li class="flex flex-col gap-xs">        <span class="well flex items-center justify-center w(36) h(36) fg-text-strong">          <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="M12 3l8 3v6c0 4.5-3.2 8-8 9-4.8-1-8-4.5-8-9V6z" />          </svg>        </span>        <h3 class="heading heading-sm mt-xs">Certificates that renew</h3>        <p class="m(0) leading-md">Every domain is served over HTTPS, and nobody has to remember a date.</p>      </li>      <li class="flex flex-col gap-xs">        <span class="well flex items-center justify-center w(36) h(36) fg-text-strong">          <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="M4 19h16M7 16V9M12 16V5M17 16v-4" />          </svg>        </span>        <h3 class="heading heading-sm mt-xs">Analytics without cookies</h3>        <p class="m(0) leading-md">Traffic and speed measured at the edge, so there is no banner to dismiss.</p>      </li>      <li class="flex flex-col gap-xs">        <span class="well flex items-center justify-center w(36) h(36) fg-text-strong">          <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="M6 6a2 2 0 1 0 0 .01M18 12a2 2 0 1 0 0 .01M6 18a2 2 0 1 0 0 .01M6 8v8M8 6h4a4 4 0 0 1 4 4v0" />          </svg>        </span>        <h3 class="heading heading-sm mt-xs">Rollbacks in seconds</h3>        <p class="m(0) leading-md">A deployment never changes. Going back is choosing an earlier one.</p>      </li>      <li class="flex flex-col gap-xs">        <span class="well flex items-center justify-center w(36) h(36) fg-text-strong">          <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 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2M16 3.1a4 4 0 0 1 0 7.8M21 21v-2a4 4 0 0 0-3-3.85" />          </svg>        </span>        <h3 class="heading heading-sm mt-xs">Built for teams</h3>        <p class="m(0) leading-md">Comments on previews, roles for members and a log of who changed what.</p>      </li>    </ul>  </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

  • A header at a reading measure. An eyebrow, a heading and a lead in a max-w(560) column. The grid below is wider than the words above it; that difference is what makes the header read as a header.
  • A grid by container width. grid-cols(2)@container(--2xl) grid-cols(3)@container(--5xl): two columns from 42rem of block and three from 64rem. Rows are farther apart than columns, row-gap-2xl against gap-xl, so each claim reads as a unit.
  • The mark in a well. A 36px well holds each icon in strong ink. A well, not a colored tile: the interface keeps hue for status.
  • A list. The claims are <li> in a <ul>; each title is an <h3> under the block's <h2>.

Six claims is plenty. Three good ones beat nine.

#On sheets

Set each claim on a sheet in a tray, 4px apart, and let one claim in each row take two columns, on alternating sides. The corners nest, because the tray's corner is a sheet's corner plus the inset.

On sheets

<section class="container-inline px-lg py-4xl" aria-labelledby="features-sheets-title">  <div class="flex flex-col gap-xl max-w(1040) mx-auto">    <header class="flex flex-col items-center gap-sm text-center">      <p class="eyebrow">Platform</p>      <h2 class="heading heading-2xl max-w(560)" id="features-sheets-title">Everything between a push and a page.</h2>    </header>    <ul class="tray grid gap(4) m(0) grid-cols(2)@container(--2xl) grid-cols(3)@container(--5xl)">      <li class="sheet sheet-raised flex flex-col gap-xs p-lg grid-col-span(2)@container(--5xl)">        <span class="fg-text-strong">          <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 14c0-5 4-10 11-10 0 7-5 11-10 11zM5 14l-2 1 1 3M10 19l-1 2-3-1M14.5 9.5h.01" />          </svg>        </span>        <h3 class="heading heading-sm mt-sm">Deploy on every push</h3>        <p class="m(0) leading-md">A preview for each branch and production from main, with nothing to configure.</p>      </li>      <li class="sheet sheet-raised flex flex-col gap-xs p-lg">        <span class="fg-text-strong">          <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="M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" />          </svg>        </span>        <h3 class="heading heading-sm mt-sm">Fourteen regions</h3>        <p class="m(0) leading-md">Requests are answered from the region nearest the visitor, on our network.</p>      </li>      <li class="sheet sheet-raised flex flex-col gap-xs p-lg">        <span class="fg-text-strong">          <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="M12 3l8 3v6c0 4.5-3.2 8-8 9-4.8-1-8-4.5-8-9V6z" />          </svg>        </span>        <h3 class="heading heading-sm mt-sm">Certificates that renew</h3>        <p class="m(0) leading-md">Every domain is served over HTTPS, and nobody has to remember a date.</p>      </li>      <li class="sheet sheet-raised flex flex-col gap-xs p-lg grid-col-span(2)@container(--5xl)">        <span class="fg-text-strong">          <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="M4 19h16M7 16V9M12 16V5M17 16v-4" />          </svg>        </span>        <h3 class="heading heading-sm mt-sm">Analytics without cookies</h3>        <p class="m(0) leading-md">Traffic and speed measured at the edge, so there is no banner to dismiss.</p>      </li>      <li class="sheet sheet-raised flex flex-col gap-xs p-lg grid-col-span(2)@container(--5xl)">        <span class="fg-text-strong">          <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="M6 6a2 2 0 1 0 0 .01M18 12a2 2 0 1 0 0 .01M6 18a2 2 0 1 0 0 .01M6 8v8M8 6h4a4 4 0 0 1 4 4v0" />          </svg>        </span>        <h3 class="heading heading-sm mt-sm">Rollbacks in seconds</h3>        <p class="m(0) leading-md">A deployment never changes. Going back is choosing an earlier one.</p>      </li>      <li class="sheet sheet-raised flex flex-col gap-xs p-lg">        <span class="fg-text-strong">          <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 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2M16 3.1a4 4 0 0 1 0 7.8M21 21v-2a4 4 0 0 0-3-3.85" />          </svg>        </span>        <h3 class="heading heading-sm mt-sm">Built for teams</h3>        <p class="m(0) leading-md">Comments on previews, roles for members and a log of who changed what.</p>      </li>    </ul>  </div></section>

#One feature, in depth

For the feature that sells the product, give it the whole width: the argument on one side and a figure on the other, from 64rem of block. The list under the lead is three short proofs as bullets with bullets-check: the check hangs on the first line of each, and the words of all three start on one edge.

One feature, in depth

<section class="container-inline px-lg py-4xl" aria-labelledby="features-depth-title">  <div class="grid gap-2xl items-center max-w(1040) mx-auto grid-cols(2)@container(--5xl)">    <div class="flex flex-col gap-lg">      <header class="flex flex-col gap-sm">        <p class="eyebrow">Previews</p>        <h2 class="heading heading-2xl" id="features-depth-title">Review the thing, not a screenshot of it.</h2>        <p class="lead">Every branch is a working site at its own address, built exactly as production will be.</p>      </header>      <ul class="bullets bullets-check gap-md">        <li class="bullets-item">          <p class="m(0) fg-text-strong font-medium">Comments on the page</p>          <p class="m(0) leading-md">Click an element and say what you see. The note follows it between deployments.</p>        </li>        <li class="bullets-item">          <p class="m(0) fg-text-strong font-medium">A check on the pull request</p>          <p class="m(0) leading-md">The link is in the place your team already reviews code.</p>        </li>        <li class="bullets-item">          <p class="m(0) fg-text-strong font-medium">Private by default</p>          <p class="m(0) leading-md">Previews ask for a sign-in until you share them.</p>        </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

  • Icons are decoration here: aria-hidden="true", since each title already says the thing.
  • Keep the heading order: one <h2> for the block, an <h3> for each claim.
  • A check mark is not a word. The proof must read without it.
  • The picture in the example is atmosphere, so its alt is empty. A screenshot of the feature gets a description.