Skip to content

Frame

Preview Available in release assets

Give media a defined aspect ratio. Use contain for diagrams whose full extent carries meaning.

Frame primary example

Show code
<figure>
  <div class="thin-frame" style="--thin-frame-fit: contain">
    <img src="/examples/media/ridge.svg" alt="Elevation profile of the route." width="640" height="240">
  </div>
  <figcaption>The full profile is visible inside the frame.</figcaption>
</figure>

Anatomy

  • Element with thin-frame class
  • One img, video, or iframe child

Variants and sizes

  • Cover fit
  • Contain fit

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.

  • Missing media
  • Media with a different ratio
  • Narrow container
  • 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

Wrap one img, video, or iframe in an element with class=thin-frame. The frame keeps a 16 / 9 aspect ratio and crops with object-fit: cover; set --thin-frame-fit: contain when the whole image carries meaning.

Behavior tier: css-only

Custom properties

PropertyDefaultDescription
--thin-frame-fitcoverObject fit inside a Frame.

Fallback

Normal document flow remains readable if CSS is unavailable.

Assets and dependencies

  • /layouts.css

Dependencies: None

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