Skip to content

Media object

Stable Available in release assets

Pair compact media with a flexible block of content without allowing long text or replaced media to force overflow.

Media object primary example

Show code
<article class="thin-media-object">
  <img src="avatar.jpg" alt="" width="64" height="64">
  <div>
    <h2>Shipping update</h2>
    <p>Your order leaves the workshop tomorrow. This deliberately long message can wrap without widening its container.</p>
  </div>
</article>

Each authored example uses the production assets and includes copyable markup.

Compact media

Decorative media accompanies visible text.

Show code
<article class="thin-media-object">
  <img src="avatar.jpg" alt="" width="64" height="64">
  <div>
    <h2>Shipping update</h2>
    <p>Your order leaves the workshop tomorrow. This deliberately long message can wrap without widening its container.</p>
  </div>
</article>

Figure and caption

A semantic figure retains its authored caption.

Show code
<article class="thin-media-object">
  <figure>
    <img src="avatar.jpg" alt="Workshop entrance" width="64" height="64">
    <figcaption>Workshop</figcaption>
  </figure>
  <div>
    <h2>Shipping update</h2>
    <p>Your order leaves the workshop tomorrow. This deliberately long message can wrap without widening its container.</p>
  </div>
</article>

Local media size

Constrain the leading media and customize the gap.

Show code
<article class="thin-media-object" style="--thin-media-object-size: 4rem; --thin-media-object-space: 2rem">
  <img src="avatar.jpg" alt="" width="64" height="64">
  <div>
    <h2>Shipping update</h2>
    <p>Your order leaves the workshop tomorrow. This deliberately long message can wrap without widening its container.</p>
  </div>
</article>

Anatomy

  • Semantic wrapper
  • Leading image, icon, or figure
  • Flexible content region

Variants and sizes

  • Compact media — shown above
  • Figure and caption — shown above
  • Local media-size override — shown above

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Long content and missing media

Long localized text and broken image resources retain text alternatives and durable links.

Show code
<article class="thin-media-object">
  <img src="avatar.jpg" alt="" width="64" height="64">
  <div>
    <h2>Versandinformationen für außergewöhnlich lange internationale Lieferadressen</h2>
    <p>Your order leaves the workshop tomorrow. This deliberately long message can wrap without widening its container.</p>
  </div>
</article>

Narrow RTL container

Reflow is exercised without changing reading or link order.

Show code
<div dir="rtl">
  <article class="thin-media-object">
    <img src="avatar.jpg" alt="" width="64" height="64">
    <div>
      <h2>Shipping update</h2>
      <p>Your order leaves the workshop tomorrow. This deliberately long message can wrap without widening its container.</p>
    </div>
  </article>
</div>
  • Missing image — shown above
  • Long localized content — shown above
  • Narrow container — shown above
  • Right-to-left content — documented, example pending

Interaction and keyboard behavior

This composition owns no JavaScript behavior. Links, images, lists, reading order, scrolling, and focus retain native behavior.

Accessibility

Choose semantic wrappers for the content, preserve logical source order, provide meaningful image alternatives and captions, and keep every destination available as an ordinary link.

Contract
COMPOSE
Basis
Composition of native landmarks, headings, lists, links, and forms; no APG widget

API

Use .thin-media-object with media first and a content wrapper second. Override --thin-media-object-size or --thin-media-object-space locally.

Behavior tier: css-only

Custom properties

PropertyDefaultDescription
--thin-media-object-size8remMaximum inline size of the leading media; its track fits the media.
--thin-media-object-spacevar(--thin-space-m)Gap between media and content.

Fallback

Semantic content, media, product links, and captions remain in ordinary document order when layout styles are unavailable.

Assets and dependencies

  • /layouts.css

Dependencies: None

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

Stability evidence

  • Item-specific API, state and promotion contract: test:tests/unit/library/layout-promotion.test.ts
  • No-JS/no-CSS fallback, semantic accessibility and asset-path contract: test:tests/browser/layout-promotion.spec.ts
  • Cross-browser difficult-content geometry, print and forced-colors screenshots: test:tests/browser/layout-promotion-stress.spec.ts