Navigation

 v0.0.4
Application blocks

Page header

The top of an app page: where you are, what it is and what you can do.

A page header is the top of a page inside an application: where you are, what this page is, and what you can do here. It is a split: the title at the start, the actions at the end, with the way back above them.

Page header

<header class="container-inline flex flex-col gap-sm">  <nav aria-label="Breadcrumb">    <ol class="breadcrumb">      <li class="breadcrumb-item">        <a class="breadcrumb-link" href="#">Projects</a>      </li>      <li class="breadcrumb-item">        <a class="breadcrumb-link" href="#">Atlas</a>      </li>      <li class="breadcrumb-item">        <a class="breadcrumb-link" href="#" aria-current="page">Deployments</a>      </li>    </ol>  </nav>  <div class="flex flex-wrap items-end justify-between gap-md">    <div class="flex flex-col gap-3xs min-w(0)">      <h1 class="heading heading-xl">Deployments</h1>      <p class="m(0) fg-text-muted">Every build of Atlas, newest first.</p>    </div>    <div class="flex flex-wrap gap-xs">      <button type="button" class="btn">        <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 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 11l5 5 5-5M12 4v12" />        </svg>Export</button>      <button type="button" class="btn btn-primary">        <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 5v14M5 12h14" />        </svg>New deployment</button>    </div>  </div></header>

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: in a wide page, a sidebar's worth of room or a dialog.

#What is in it

  • The way back. A breadcrumb over the title, for a page more than one level deep.
  • The title and one line. A heading as the page's <h1> and a muted sentence that says what the list below holds.
  • The actions. The one the page exists for is a primary button, last in the row; the rest are default buttons before it.
  • A split that wraps. flex flex-wrap items-end justify-between gap-md: on a narrow screen the actions drop under the title and keep their order. min-w(0) on the title's column lets a long title wrap instead of pushing the actions out.

This is a region of a page, not a bar: it scrolls with the content. For the bar that stays, use a navbar.

#For one thing

The page of a single project, person or file starts with the thing itself: its mark, its name, its status, and one line of facts. Secondary actions go into a menu behind one quiet button, and tabs under the header switch between its views.

For one thing

<header class="container-inline flex flex-col gap-md">  <div class="flex flex-wrap items-center justify-between gap-md">    <div class="flex items-center gap-sm min-w(0)">      <span class="avatar avatar-lg avatar-square" aria-hidden="true">A</span>      <div class="flex flex-col gap-3xs min-w(0)">        <div class="flex flex-wrap items-center gap-xs">          <h1 class="heading heading-lg">Atlas</h1>          <span class="badge badge-success badge-dot">Ready</span>        </div>        <p class="m(0) fg-text-muted truncate">atlas.dev · deployed 2 hours ago from <code class="code">main</code>        </p>      </div>    </div>    <div class="flex flex-wrap gap-xs">      <a class="btn" href="#">Visit        <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="M17 7 7 17M8 7h9v9" />        </svg>      </a>      <button type="button" class="btn btn-quiet btn-square" popovertarget="ph-more" aria-label="More actions">        <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 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0M11 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0M18 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0" />        </svg>      </button>      <div class="menu menu-end" id="ph-more" popover>        <button type="button" class="menu-item" popovertarget="ph-more" popovertargetaction="hide">Redeploy</button>        <button type="button" class="menu-item" popovertarget="ph-more" popovertargetaction="hide">Copy address</button>        <hr class="menu-separator">        <button type="button" class="menu-item menu-item-danger" popovertarget="ph-more" popovertargetaction="hide">Delete project</button>      </div>    </div>  </div>  <nav class="tabs" aria-label="Project">    <a class="tabs-item" href="#" aria-current="page">Overview</a>    <a class="tabs-item" href="#">Deployments      <span class="badge badge-sm badge-pill">37</span>    </a>    <a class="tabs-item" href="#">Analytics</a>    <a class="tabs-item" href="#">Settings</a>  </nav></header>

#With facts

For a record, set its facts in a row under the title: a description list in a wrapping flex row, parted from the title by a hairline. Each fact is a small label over a value in ink.

With facts

<header class="container-inline flex flex-col gap-lg">  <div class="flex flex-wrap items-start justify-between gap-md">    <div class="flex flex-col gap-xs min-w(0)">      <a class="link link-quiet fg-text-muted self-start" href="#">← All invoices</a>      <div class="flex flex-wrap items-center gap-xs">        <h1 class="heading heading-xl">Invoice 2026-0042</h1>        <span class="badge badge-warning badge-dot">Due in 5 days</span>      </div>    </div>    <div class="flex flex-wrap gap-xs">      <button type="button" class="btn">Download PDF</button>      <button type="button" class="btn btn-primary">Pay $240.00</button>    </div>  </div>  <dl class="flex flex-wrap gap-lg col-gap-2xl m(0) pt-md bt(1) bt-solid b-line-hair">    <div class="flex flex-col gap-3xs">      <dt class="text-xs fg-text-muted">Billed to</dt>      <dd class="m(0) fg-text-strong">Northwind Ltd</dd>    </div>    <div class="flex flex-col gap-3xs">      <dt class="text-xs fg-text-muted">Issued</dt>      <dd class="m(0) fg-text-strong">1 November 2026</dd>    </div>    <div class="flex flex-col gap-3xs">      <dt class="text-xs fg-text-muted">Due</dt>      <dd class="m(0) fg-text-strong">16 November 2026</dd>    </div>    <div class="flex flex-col gap-3xs">      <dt class="text-xs fg-text-muted">Amount</dt>      <dd class="m(0) fg-text-strong">$240.00</dd>    </div>  </dl></header>

#Accessibility

  • The header is a <header> inside <main>, and its title is the page's one <h1>.
  • Status is a word in a badge, never a color alone.
  • The letter mark beside a record's name repeats the name, so it is hidden from assistive technology.
  • An icon button has a name; the menu it opens is a list of buttons, closed with Escape.
  • The facts are a <dl>: each value is announced with its label.