Skip to content

Overlay

Preview Available in release assets

Layer related content in one grid cell, preserving the reading and focus order in the source.

Overlay primary example

Show code
<figure class="thin-overlay">
  <img src="/examples/media/ridge.svg" alt="Elevation profile of the route." width="640" height="240">
  <figcaption data-overlay="start" style="background: Canvas; color: CanvasText">Route profile</figcaption>
</figure>

Anatomy

  • Element with thin-overlay class
  • Children stacked in one grid cell
  • Optional data-overlay placement

Variants and sizes

  • data-overlay="start"
  • data-overlay="center"
  • data-overlay="end"

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.

  • Long caption
  • Missing media
  • Right-to-left content
  • Forced colors

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-overlay to the element that groups layered content. Every child shares one grid cell in source order; data-overlay=start, center, or end places a child. Give overlaid text its own readable background.

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