Skip to content

Cluster

Stable Available in release assets

Cluster wraps related controls or short content into intrinsic rows without viewport breakpoints.

Cluster primary example

Show code
<div class="thin-cluster">
  <button class="thin-button" type="button">Save</button>
  <button class="thin-button" data-variant="secondary" type="button">Cancel</button>
</div>

Anatomy

  • Layout wrapper or semantic adapter
  • Direct authored children

Variants and sizes

  • <thin-cluster>
  • class="thin-cluster"
  • --thin-cluster-space override

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

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

  • Wrapped narrow row
  • Long labels
  • Right-to-left content

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

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

Accessibility

Preserve DOM reading order, use semantic wrappers when landmarks or headings are required, and never rely on layout alone to communicate structure.

Contract
PLATFORM
Basis
Native CSS layout and document defaults over semantic HTML; no APG widget

API

Cluster is a CSS-only layout host. Use the unregistered custom element or class="thin-cluster". Children wrap intrinsically as width shrinks.

Behavior tier: css-only

Hosts

Apply the class to the HTML element that supplies the appropriate landmark or content role.

  • <div class="thin-cluster">…</div>
  • <div class="thin-cluster">…</div>

Custom properties

PropertyDefaultDescription
--thin-cluster-spacevar(--thin-space-s)Gap between clustered children.

Examples

Custom element host
<div class="thin-cluster">
  <button class="thin-button" type="button">Save</button>
  <button class="thin-button" data-variant="secondary" type="button">Cancel</button>
</div>
Local spacing override
Docs Themes 
<div class="thin-cluster" style="--thin-cluster-space: var(--thin-space-m)">
  <a href="/docs/">Docs</a>
  <a href="/themes/">Themes</a>
</div>

Fallback

Normal document flow remains readable if CSS is unavailable.

Assets and dependencies

  • /layouts.css

Dependencies: None

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

Stability evidence

  • Canonical public API and complete documentation: test:tests/unit/release/stability.test.ts
  • Production-asset difficult-content fixture: test:tests/unit/release/stability.test.ts
  • Recorded cross-theme and environmental review protocol: review:site/src/pages/quality/foundation-layout.astro#review-protocol

Composition

Derived from the examples and style specs, not authored.

Composes

Used by