Dashboard shell

Preview Available in release assets

Provide a landmark-complete application page shell whose navigation, main content, supporting region, and footer retain truthful reading order.

Dashboard shell primary example

<div class="thin-container">
  <div class="thin-dashboard-shell">
    <header data-dashboard-region="header">
      <a class="thin-skip-link" href="#dashboard-main">Skip to dashboard content</a>
      <a href="/">Thin-Sky operations</a>
      <nav aria-label="Account">
        <a href="/account">Account</a>
      </nav>
    </header>
    <nav data-dashboard-region="navigation" aria-label="Dashboard">
      <a href="/dashboard" aria-current="page">Overview</a>
      <a href="/services">Services</a>
      <a href="/incidents">Incidents</a>
    </nav>
    <main id="dashboard-main" data-dashboard-region="main" tabindex="-1">
      <h1>Operations overview</h1>
      <section aria-labelledby="status-title">
        <h2 id="status-title">Service status</h2>
        <p>All critical services are available.</p>
      </section>
    </main>
    <aside data-dashboard-region="aside" aria-labelledby="activity-title">
      <h2 id="activity-title">Recent activity</h2>
      <p>Gateway deployed 8 minutes ago.</p>
    </aside>
    <footer data-dashboard-region="footer">
      <p>System data updated <time datetime="2026-08-01T20:00:00-05:00">8:00 PM</time>.</p>
    </footer>
  </div>
</div>

Show code

<div class="thin-container">
  <div class="thin-dashboard-shell">
    <header data-dashboard-region="header">
      <a class="thin-skip-link" href="#dashboard-main">Skip to dashboard content</a>
      <a href="/">Thin-Sky operations</a>
      <nav aria-label="Account">
        <a href="/account">Account</a>
      </nav>
    </header>
    <nav data-dashboard-region="navigation" aria-label="Dashboard">
      <a href="/dashboard" aria-current="page">Overview</a>
      <a href="/services">Services</a>
      <a href="/incidents">Incidents</a>
    </nav>
    <main id="dashboard-main" data-dashboard-region="main" tabindex="-1">
      <h1>Operations overview</h1>
      <section aria-labelledby="status-title">
        <h2 id="status-title">Service status</h2>
        <p>All critical services are available.</p>
      </section>
    </main>
    <aside data-dashboard-region="aside" aria-labelledby="activity-title">
      <h2 id="activity-title">Recent activity</h2>
      <p>Gateway deployed 8 minutes ago.</p>
    </aside>
    <footer data-dashboard-region="footer">
      <p>System data updated <time datetime="2026-08-01T20:00:00-05:00">8:00 PM</time>.</p>
    </footer>
  </div>
</div>

Anatomy

Ancestor inline-size query container
Skip link
Header
Primary navigation
Main landmark
Supporting aside
Footer

Variants and sizes

Narrow container
Wide container
Long localized content
RTL

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Default
Sparse content
Dense content
Missing optional region
Narrow container
400% zoom
RTL
Print

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Layout never changes semantic order. Links, landmarks, headings, skip navigation, and document scrolling remain browser-native.

Accessibility

Use one main landmark, labelled navigation and aside regions, a first-focusable skip link, unique headings, and source order that remains correct when the grid collapses.

Contract: COMPOSE
Basis: Composition of native landmarks, headings, lists, links, and forms; no APG widget

API

Place .thin-dashboard-shell inside an ancestor inline-size query container such as thin-container. Dashboard slots use data-dashboard-region without replacing semantic landmarks.

Behavior tier: css-only

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Without CSS, authored headings, landmarks, cards, links, and content remain in normal document order.

Assets and dependencies

/layouts.css

Dependencies: None

Source: packages/ui/src/style/layouts.ts

Composition

Derived from the examples and style specs, not authored.

Composes

Container