Blocks

The Components pages show each part on its own; blocks show them working together. Each one below is plain HTML using the documented classes — flip to the Code tab to copy the whole section. Interactive bits (menus, toasts, …) install the same way as everywhere else (see Installation → Behaviors).

Account settings

A form card — hc-field rows (input, select, switch) over a footer action bar.

<form class="hc-card" style="max-inline-size:32rem;">
  <div class="hc-card__header"><strong>Account settings</strong></div>
  <div class="hc-card__body" style="display:flex;flex-direction:column;gap:1rem;">
    <div class="hc-field">
      <label class="hc-field__label" for="name">Name</label>
      <input class="hc-input" id="name" value="Ada Lovelace">
    </div>
    <div class="hc-field">
      <label class="hc-field__label" for="email">Email</label>
      <input class="hc-input" id="email" type="email" value="ada@example.com">
    </div>
    <div class="hc-field">
      <label class="hc-field__label" for="plan">Plan</label>
      <select class="hc-select" id="plan">
        <option>Free</option>
        <option selected>Pro</option>
        <option>Team</option>
      </select>
    </div>
    <label class="hc-switch-label"><input class="hc-switch" type="checkbox" role="switch" checked> Email notifications</label>
    <label class="hc-switch-label"><input class="hc-switch" type="checkbox" role="switch"> Product updates</label>
  </div>
  <div class="hc-card__footer" style="display:flex;gap:.5rem;justify-content:flex-end;">
    <button class="hc-button" data-variant="ghost" type="button">Cancel</button>
    <button class="hc-button" data-variant="primary" type="submit">Save changes</button>
  </div>
</form>

Data table

A list view — a header bar with search (hc-input-group) and actions, a hc-table with status badges, and a pager.

Name	Role	Status
Ada Lovelace	Engineer	Active
Alan Turing	Researcher	Away
Grace Hopper	Admiral	Active

<div class="hc-card" style="max-inline-size:40rem;">
  <div class="hc-card__header"
       style="display:flex;gap:.75rem;align-items:center;justify-content:space-between;flex-wrap:wrap;">
    <strong>Users</strong>
    <div style="display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;">
      <div class="hc-input-group" style="inline-size:13rem;">
        <span class="hc-input-addon" aria-hidden="true">🔍</span>
        <input class="hc-input" type="search" aria-label="Search users" placeholder="Search…">
      </div>
      <button class="hc-button" type="button">Filter</button>
      <button class="hc-button" data-variant="primary" type="button">New user</button>
    </div>
  </div>
  <div class="hc-card__body" style="padding:0;">
    <table class="hc-table" style="inline-size:100%;">
      <thead><tr><th>Name</th><th>Role</th><th>Status</th></tr></thead>
      <tbody>
        <tr><td>Ada Lovelace</td><td>Engineer</td><td><span class="hc-badge" data-variant="success">Active</span></td></tr>
        <tr><td>Alan Turing</td><td>Researcher</td><td><span class="hc-badge" data-variant="warning">Away</span></td></tr>
        <tr><td>Grace Hopper</td><td>Admiral</td><td><span class="hc-badge" data-variant="success">Active</span></td></tr>
      </tbody>
    </table>
  </div>
  <div class="hc-card__footer" style="display:flex;justify-content:flex-end;">
    <nav class="hc-pagination" aria-label="Pagination">
      <a class="hc-pagination__item" href="#">‹ Prev</a>
      <a class="hc-pagination__item" aria-current="page" href="#">1</a>
      <a class="hc-pagination__item" href="#">2</a>
      <a class="hc-pagination__item" href="#">3</a>
      <a class="hc-pagination__item" href="#">Next ›</a>
    </nav>
  </div>
</div>

A centred auth card — two fields, a checkbox, and a full-width primary button.

<form class="hc-card" style="max-inline-size:24rem;">
  <div class="hc-card__header"><strong>Sign in</strong></div>
  <div class="hc-card__body" style="display:flex;flex-direction:column;gap:1rem;">
    <div class="hc-field">
      <label class="hc-field__label" for="email">Email</label>
      <input class="hc-input" id="email" type="email" placeholder="you@example.com">
    </div>
    <div class="hc-field">
      <label class="hc-field__label" for="password">Password</label>
      <input class="hc-input" id="password" type="password" placeholder="••••••••">
    </div>
    <label class="hc-checkbox-label"><input class="hc-checkbox" type="checkbox"> Remember me</label>
  </div>
  <div class="hc-card__footer" style="display:flex;flex-direction:column;gap:.5rem;">
    <button class="hc-button" data-variant="primary" type="submit" style="inline-size:100%;">Sign in</button>
    <p style="margin:0;text-align:center;">No account? <a href="/signup">Create one</a></p>
  </div>
</form>

Activity feed

A notification list — hc-item rows with avatars and trailing badges.

Ada commented on “Q3 report”2 minutes ago

New

Grace merged “feat/auth”1 hour ago

Deploy finishedToday, 09:14

<div class="hc-card" style="max-inline-size:30rem;">
  <div class="hc-card__header"><strong>Recent activity</strong></div>
  <div class="hc-card__body" style="padding:.5rem;">
    <div class="hc-item">
      <span class="hc-avatar" aria-label="Ada Lovelace">A</span>
      <div class="hc-item__content">
        <span class="hc-item__title">Ada commented on “Q3 report”</span>
        <span class="hc-item__description">2 minutes ago</span>
      </div>
      <span class="hc-badge" data-variant="info">New</span>
    </div>
    <div class="hc-item">
      <span class="hc-avatar" aria-label="Grace Hopper">G</span>
      <div class="hc-item__content">
        <span class="hc-item__title">Grace merged “feat/auth”</span>
        <span class="hc-item__description">1 hour ago</span>
      </div>
    </div>
    <div class="hc-item">
      <span class="hc-item__media" aria-hidden="true">📦</span>
      <div class="hc-item__content">
        <span class="hc-item__title">Deploy finished</span>
        <span class="hc-item__description">Today, 09:14</span>
      </div>
      <span class="hc-badge" data-variant="success">OK</span>
    </div>
  </div>
</div>

App shell

A full admin dashboard — hc-shell (header, sidebar, scrolling main, footer). The sidebar nav is built from hc-item rows (icon + label, the active one selected); the header carries search and an account avatar; the main has a toolbar, a grid of stat cards with delta badges, and a recent-orders table. Click « to collapse the sidebar to an icon rail — it’s live, driven by installShell() (data-collapsible on the nav + a [data-hc-shell-collapse] button; each label is wrapped in .hc-shell__label, kept in the a11y tree). Narrow the window below 60rem and the collapse control gives way to a [data-hc-shell-toggle] hamburger (☰) that slides the nav in as an off-canvas overlay — the same installShell() handles focus, Escape, and scrim click-out. The --hc-shell-sidebar-width / --hc-shell-pad knobs and the demo’s fixed height just scale the shell into the box below; drop them to fill the viewport.

Dashboard

Revenue$48.2k▲ 12%

Orders1,204▲ 4%

Refunds18▼ 2%

Order	Customer	Status
#1042	Ada Lovelace	Paid
#1041	Alan Turing	Pending
#1040	Grace Hopper	Paid

<!-- Drop the inline block-size / --hc-shell-sidebar-width to fill the viewport. -->
<div class="hc-shell">
  <header class="hc-shell__header" style="display:flex;align-items:center;gap:.75rem;">
    <!-- installShell() wires both controls. The .hc-shell__toggle hamburger
         shows only at mobile widths (<= 60rem) and opens the off-canvas
         sidebar; the «-button collapses the sidebar to an icon rail on
         desktop. -->
    <button class="hc-button hc-shell__toggle" data-variant="ghost" type="button"
            data-hc-shell-toggle aria-label="Open navigation">☰</button>
    <button class="hc-button" data-variant="ghost" type="button"
            data-hc-shell-collapse aria-label="Toggle sidebar">
      <!-- .hc-shell__collapse-icon mirrors the chevron when collapsed: « → » -->
      <span class="hc-shell__collapse-icon">«</span>
    </button>
    <strong style="display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;"><span aria-hidden="true">◆</span> Acme</strong>
    <div class="hc-input-group" style="flex:1;max-inline-size:22rem;">
      <span class="hc-input-addon" aria-hidden="true">🔍</span>
      <input class="hc-input" type="search" aria-label="Search" placeholder="Search orders, customers…">
    </div>
    <button class="hc-button" data-variant="ghost" type="button" aria-label="Notifications" style="margin-inline-start:auto;">🔔</button>
    <span class="hc-avatar" aria-label="Your account" data-size="sm">Y</span>
  </header>

  <!-- data-collapsible + the [data-hc-shell-collapse] button above let
       installShell() toggle this to an icon rail; .hc-shell__label hides
       each label in the rail but keeps it in the accessibility tree. -->
  <nav class="hc-shell__sidebar" aria-label="Primary" data-collapsible
       style="display:flex;flex-direction:column;gap:.1rem;">
    <button class="hc-button" data-variant="primary" type="button">+ <span class="hc-shell__label">New order</span></button>

    <p class="hc-shell__label" style="margin:.25rem .25rem .15rem;font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--hc-color-text-muted);">Menu</p>
    <a class="hc-item" href="/dashboard" data-selected aria-current="page">
      <span class="hc-item__media" aria-hidden="true">▦</span>
      <div class="hc-item__content"><span class="hc-item__title hc-shell__label">Dashboard</span></div>
    </a>
    <a class="hc-item" href="/orders">
      <span class="hc-item__media" aria-hidden="true">📦</span>
      <div class="hc-item__content"><span class="hc-item__title hc-shell__label">Orders</span></div>
    </a>
    <a class="hc-item" href="/customers">
      <span class="hc-item__media" aria-hidden="true">👤</span>
      <div class="hc-item__content"><span class="hc-item__title hc-shell__label">Customers</span></div>
    </a>
    <a class="hc-item" href="/products">
      <span class="hc-item__media" aria-hidden="true">🏷️</span>
      <div class="hc-item__content"><span class="hc-item__title hc-shell__label">Products</span></div>
    </a>

    <p class="hc-shell__label" style="margin:.6rem .25rem .15rem;font-size:.7rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--hc-color-text-muted);">Workspace</p>
    <a class="hc-item" href="/settings">
      <span class="hc-item__media" aria-hidden="true">⚙️</span>
      <div class="hc-item__content"><span class="hc-item__title hc-shell__label">Settings</span></div>
    </a>
  </nav>

  <main class="hc-shell__main">
    <div style="display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-block-end:1rem;">
      <strong style="font-size:1.05rem;">Dashboard</strong>
      <div style="display:flex;gap:.5rem;">
        <button class="hc-button" data-size="sm" type="button">Last 30 days ▾</button>
        <button class="hc-button" data-size="sm" data-variant="primary" type="button">Export</button>
      </div>
    </div>

    <div class="hc-grid" style="--hc-grid-min:9rem;">
      <div class="hc-card" style="padding:1rem;display:flex;flex-direction:column;gap:.3rem;">
        <span style="font-size:.78rem;color:var(--hc-color-text-muted);">Revenue</span>
        <strong style="font-size:1.5rem;">$48.2k</strong>
        <span><span class="hc-badge" data-variant="success">▲ 12%</span></span>
      </div>
      <div class="hc-card" style="padding:1rem;display:flex;flex-direction:column;gap:.3rem;">
        <span style="font-size:.78rem;color:var(--hc-color-text-muted);">Orders</span>
        <strong style="font-size:1.5rem;">1,204</strong>
        <span><span class="hc-badge" data-variant="success">▲ 4%</span></span>
      </div>
      <div class="hc-card" style="padding:1rem;display:flex;flex-direction:column;gap:.3rem;">
        <span style="font-size:.78rem;color:var(--hc-color-text-muted);">Refunds</span>
        <strong style="font-size:1.5rem;">18</strong>
        <span><span class="hc-badge" data-variant="warning">▼ 2%</span></span>
      </div>
    </div>

    <div class="hc-card" style="margin-block-start:1rem;">
      <div class="hc-card__header"><strong>Recent orders</strong></div>
      <div class="hc-card__body" style="padding:0;">
        <table class="hc-table" style="inline-size:100%;">
          <thead><tr><th>Order</th><th>Customer</th><th>Status</th></tr></thead>
          <tbody>
            <tr><td>#1042</td><td>Ada Lovelace</td><td><span class="hc-badge" data-variant="success">Paid</span></td></tr>
            <tr><td>#1041</td><td>Alan Turing</td><td><span class="hc-badge" data-variant="warning">Pending</span></td></tr>
            <tr><td>#1040</td><td>Grace Hopper</td><td><span class="hc-badge" data-variant="success">Paid</span></td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </main>

  <footer class="hc-shell__footer"><small>© Acme · v2.4</small></footer>
</div>

A detail-page header — back link, title with a status badge, description, and a trailing actions cluster. Pure layout utilities (hc-stack + hc-cluster + hc-spacer) with logical margins; no dedicated component needed.

← Back to projects

Acme widgets

Active

Last updated 2 hours ago by Grace Hopper.

<header class="hc-stack" style="--hc-stack-gap: .5rem;">
  <a href="/projects">← Back to projects</a>
  <div class="hc-cluster" style="--hc-cluster-gap: .75rem;">
    <h1 style="margin: 0;">Acme widgets</h1>
    <span class="hc-badge" data-variant="success">Active</span>
    <span class="hc-spacer"></span>
    <button class="hc-button" type="button">Share</button>
    <button class="hc-button" data-variant="primary" type="button">Edit project</button>
  </div>
  <p style="margin: 0; color: var(--hc-color-text-muted);">
    Last updated 2 hours ago by Grace Hopper.
  </p>
</header>

The hc-spacer pushes the actions to the inline-end edge, so the row works unchanged under dir="rtl". On narrow viewports the hc-cluster wraps — actions drop below the title instead of overflowing.