Components

Navigation and structure

The sidebar, page header, breadcrumb, back link, cards, and insets. How people find their way and how content is grouped.

The app’s only navigation landmark. It holds the logo, the Stores page, each connected store with its recent reports, a way to connect another store, then Settings and Log out at the bottom. The active page is tinted teal. Below 960px it collapses to a top bar with a Menu button.

Sidebar (expanded store)

Code

<aside class="sidebar">
  <div class="sidebar-head"><a href="#sidebar" aria-label="Weekwright home"><span class="logo"><svg class="logo-mark" viewBox="0 0 28 28" aria-hidden="true"><rect width="28" height="28" rx="7"/><path d="M6.5 9.5 10 19l4-7 4 7 3.5-9.5"/></svg>Weekwright</span></a></div>
  <nav class="sidebar-body" aria-label="Main">
    <a href="#sidebar" class="nav-item"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z"/></svg> Stores</a>
    <div class="nav-group">
      <div class="label">Your stores</div>
      <div class="nav-store active"><a href="#sidebar" class="nav-store-link">Cozy Goods</a><button type="button" class="chev" aria-label="Collapse" aria-expanded="true"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></button></div>
      <div class="nav-nested"><span class="label">Recent reports</span>
        <a href="#sidebar" class="nav-report active">Sep 14–20</a>
        <a href="#sidebar" class="nav-report">Sep 7–13</a>
      </div>
      <div class="nav-store"><a href="#sidebar" class="nav-store-link">North Pier Tea</a><button type="button" class="chev" aria-label="Expand" aria-expanded="false"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></button></div>
      <a href="#sidebar" class="nav-connect"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> Connect store</a>
    </div>
    <div class="sidebar-bottom">
      <a href="#sidebar" class="nav-item"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h9m4 0h3M4 17h3m4 0h9M15 4v6M9 14v6"/></svg> Settings</a>
      <button type="button" class="nav-item nav-logout"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 4H5v16h5M15 8l4 4-4 4M19 12H9"/></svg> Log out</button>
    </div>
  </nav>
</aside>

Level one is a page, level two a store, level three a report. Do not add a fourth.
A chevron button expands a store. It carries aria-expanded and a label of Expand or Collapse.
A store with no report lists Waiting for first report as static text, not a link.
Keep one <nav aria-label="Main">. Do not repeat navigation in a second landmark on phones.

Brand guide and shipped sidebar differ

The written brand order is Overview → Stores → Reports → Settings. The shipped app has Stores, then each store with recent reports, then Settings and Log out. Until the brand guide is updated, this page shows what ships.

Every page opens with a title (an h1), an optional one-line sub, an optional breadcrumb above, and an end slot for a pill or action. Breadcrumbs are for depth: Stores / Cozy Goods.

Header with breadcrumb and pill

Code

<header class="page-header">
  <div>
    <nav class="breadcrumb" aria-label="Breadcrumb"><span class="crumb"><a href="#page-header">Stores</a></span><span class="crumb"><span class="sep"> / </span><span class="current">Cozy Goods</span></span></nav>
    <h1>Cozy Goods</h1>
    <div class="sub">Latest weekly report and archive</div>
  </div>
  <div class="page-header-end"><span class="pill pill-accent">● Connected</span></div>
</header>

<PageHeader
  title="Cozy Goods"
  sub="Latest weekly report and archive"
  crumbs={[{ label: 'Stores', to: '/' }, { label: 'Cozy Goods' }]}
>
  <Pill tone="accent">● Connected</Pill>
</PageHeader>

One h1 per page, always in the header.
The last crumb is the current page and is not a link.
The end slot wraps below the title at 520px and narrower.

#Back link

On a page one level down with no sidebar context, such as a report, a .back-link returns to the parent: Back to store.

Back link

Back to store

Code

<a class="back-link" href="#back-link"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M19 12H5M11 6l-6 6 6 6"/></svg> Back to store</a>

#Section head

A quiet heading above a block of content on a page, with an optional muted hint on the right. It is an h2.

Section head

#Week by week

Newest first

Code

<div class="section-head"><h2>Week by week</h2><span class="muted">Newest first</span></div>

#Card and inset

A .card is the default surface for grouped content: a hairline border, the 10px radius, and the small shadow. An .inset is a quiet well inside a card for a status line or a plan box. Do not nest a card in a card; use an inset.

Card with an inset

#Billing

Your plan, payment method, and invoices.

Weekwright

First pack free, then the founding price

Not started

You’ll leave briefly to pay, then come back.

Code

<section class="card">
  <h2 class="card-title">Billing</h2>
  <p class="card-desc">Your plan, payment method, and invoices.</p>
  <div class="inset billing-status">
    <div><div class="plan">Weekwright</div><div class="detail">First pack free, then the founding price</div></div>
    <span class="pill pill-warn">Not started</span>
  </div>
  <div class="btn-row panel-actions"><button type="button" class="btn btn-secondary">Manage billing</button></div>
  <p class="handoff-note">You’ll leave briefly to pay, then come back.</p>
</section>

Use it when

Grouping related content that stands alone: a setting, a panel, a summary
An inset for one status line or a small recap inside a card

Don’t use it when

Nesting cards. Use an inset
Wrapping a single line of text
Adding more than the standard shadow

Only modals, the sign-in card, and hovered cards use the larger shadow. Do not stack shadows.

#Sidebar

#Page header and breadcrumb

#Back link

#Section head

#Week by week

#Card and inset

#Billing

Use it when

Don’t use it when