Skip to content

Stack

Stable Available in release assets

Stack arranges authored children vertically with a theme-driven, overridable gap.

Stack primary example

Show code
<ul class="thin-stack" data-space="s">
  <li>First item</li>
  <li>Second item with content that can wrap</li>
</ul>

Anatomy

  • Element with thin-stack class
  • Direct authored children

Variants and sizes

  • .thin-stack
  • data-space preset or length
  • --thin-stack-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.

  • Narrow container
  • Long and localized content
  • Nested stacks

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

Add class=thin-stack to an existing element. Optional data-space accepts the theme steps 2xs, xs, s, m, l, and xl. Browsers that support typed attr() also accept a CSS length such as 1.25rem. A missing or unrecognized value uses the medium theme step. The --thin-stack-space custom property takes precedence and works across browsers.

Behavior tier: css-only

Hosts

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

  • <ul class="thin-stack">…</ul>
  • <div class="thin-stack">…</div>

Custom properties

PropertyDefaultDescription
--thin-stack-spacevar(--thin-space-m)Explicit gap between direct children. Overrides data-space.

Examples

Named spacingUse a spacing step from the active theme on an existing semantic element.
  • First item
  • Second item with content that can wrap
<ul class="thin-stack" data-space="s">
  <li>First item</li>
  <li>Second item with content that can wrap</li>
</ul>
Length from an attributeWith typed attr(), the gap is 1.25rem. Other browsers use the medium theme step.

Order summary

Two-day delivery

<section class="thin-stack" data-space="1.25rem">
  <h2>Order summary</h2>
  <p>Two-day delivery</p>
</section>
Local spacing overrideSet the documented custom property for a precise value across browsers.
  • Primary item
  • Supporting item
<ul class="thin-stack" style="--thin-stack-space: 1.25rem">
  <li>Primary item</li>
  <li>Supporting item</li>
</ul>

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.

Used by