Skip to content

Reel

Preview Available in release assets

Lay out a list along its inline axis so it can scroll in either writing direction.

Reel primary example

Show code
<ul class="thin-reel" aria-label="Related reading" tabindex="0">
  <li><a href="/foundations/fluid-type/">Fluid type</a></li>
  <li><a href="/layouts/stack/">Stack</a></li>
  <li><a href="/guides/html-elements/">HTML elements</a></li>
</ul>

Anatomy

  • Element with thin-reel class
  • Children laid out along the inline axis
  • Inline scroll snapping

Variants and sizes

  • List reel
  • Card reel

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.

  • Overflowing content
  • Keyboard scrolling
  • Right-to-left content
  • Reduced motion

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

This layout owns no JavaScript behavior. Reading order, focus order, links, and scrolling stay native.

Accessibility

Layout changes position, never meaning. Keep source order logical, because it is the reading and focus order at every size.

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

API

Add class=thin-reel to a list or group. Children keep a preferred size and the group scrolls on its inline axis with snap points. Make an overflowing reel keyboard scrollable, for example with tabindex="0" and an accessible name.

Behavior tier: css-only

Custom properties

PropertyDefaultDescription
--thin-reel-item18remPreferred inline size of each item.
--thin-reel-spacevar(--thin-space-m)Gap between items.

Fallback

Normal document flow remains readable if CSS is unavailable.

Assets and dependencies

  • /layouts.css

Dependencies: None

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

Composition

Derived from the examples and style specs, not authored.

Used by