Skip to content

Fluid space

Preview Available in release assets

Expose six rem-based spacing roles derived from the theme’s modular ratio at each viewport endpoint.

Fluid space primary example

Show code
<div class="thin-stack" data-space="l">
  <section class="thin-card">Large semantic gap</section>
  <section class="thin-card">Spacing remains bounded and theme-owned.</section>
</div>

Anatomy

  • --thin-space-2xs
  • --thin-space-xs
  • --thin-space-s
  • --thin-space-m
  • --thin-space-l
  • --thin-space-xl
  • Recorded scale provenance

Variants and sizes

  • 2XS
  • XS
  • S
  • M
  • L
  • XL

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.

  • Minimum viewport bound
  • Fluid interval
  • Maximum viewport bound
  • Zoomed text
  • Narrow container
  • Nested composition

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Spacing steps above and below the medium role share the heading scale ratio. Each step interpolates between its viewport endpoints.

Accessibility

Use semantic roles consistently and test reflow at zoom. Spacing must not encode meaning by itself or separate labels from their controls.

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

API

Consume the --thin-space-* custom properties from a complete theme. Scale provenance and generated values are exported from ./tokens.

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

Normal document flow remains readable without generated spacing roles.

Assets and dependencies

  • /themes.css

Dependencies: None

Source: packages/ui/src/tokens/scales.ts

Composition

Derived from the examples and style specs, not authored.

Composes