Breakout

Preview Available in release assets

Keep paragraphs on a reading track and let a figure use a wider track. Give the caption and figure a closer relationship than the following section.

Breakout primary example

<article class="thin-breakout thin-stack">
  <h2>Field observations</h2>
  <p>Notes stay on the reading track, where the line length follows the available space.</p>
  <figure data-breakout="feature">
    <img src="/examples/media/ridge.svg" alt="A profile of the ridge, with its high point near the center." width="640" height="240">
    <figcaption>The profile fits without cropping. A caption can wrap below it.</figcaption>
  </figure>
  <p>The next section returns to the reading track.</p>
</article>

Show code

<article class="thin-breakout thin-stack">
  <h2>Field observations</h2>
  <p>Notes stay on the reading track, where the line length follows the available space.</p>
  <figure data-breakout="feature">
    <img src="/examples/media/ridge.svg" alt="A profile of the ridge, with its high point near the center." width="640" height="240">
    <figcaption>The profile fits without cropping. A caption can wrap below it.</figcaption>
  </figure>
  <p>The next section returns to the reading track.</p>
</article>

Anatomy

Element with thin-breakout class
Children on the content track
Optional data-breakout children on wider tracks

Variants and sizes

Content track
data-breakout="popout"
data-breakout="feature"
data-breakout="full"

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.

Narrow container
Wide container
Long localized content
Right-to-left content

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-breakout to the element that groups the content. Children stay on the reading track; data-breakout=popout, feature, or full places a child on a wider named track. The content track never exceeds --thin-measure.

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 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.

Composes

Stack