Media Object

data-layout="media" places a figure and content side by side — the most common component pattern on the web.

Basic: Avatar + Text

An image or avatar next to text content. The figure auto-sizes, content fills remaining space.

data-layout="media"
JD avatar
Jane Doe

Published a new article about CSS Grid Identity systems and how semantic HTML auto-registers to grid areas.

With Figure Element

Using a <figure> element for the media side. Figures auto-place to the figure grid area.

figure element auto-placement
120 × 80

Product Feature

The figure element is auto-detected and placed in the figure grid area. Content fills the rest.

Reversed Layout

Add data-layout-reverse to flip the figure to the right side.

data-layout-reverse
120 × 80

Reversed Media

Content on the left, figure on the right. Same HTML order, different visual layout.

Activity Feed

A list of media objects is a natural fit for activity feeds, comment lists, and notification panels.

list of media objects
AB
Alice Brown 2 min ago

Deployed v2.1.0 to production. All health checks passing.

CM
Carlos Martinez 15 min ago

Merged pull request #247: Add container query support to media layout.

SK
Sara Kim 1 hour ago

Opened issue: Grid identity not working with shadow DOM in Firefox.

Alignment Variants

Control vertical alignment with data-layout-align.

align="center" (vertically centered)
VB

Vanilla Breeze

A design system for the semantic web. CSS layouts, design tokens, and web components.

The avatar and text content are vertically centered.

Responsive Stacking

Media objects automatically stack when their container is narrower than 25rem (via container query). Resize the browser window to see the transition.

container query responsive
RS
Responsive Stack

Resize the browser window narrower than 25rem to see this media object stack vertically via container query.