Components / Layout

Media row

A small visual beside flexible text for activity updates, biographies or comment headers. Quote owns quotation content; Media can arrange its attribution.

Media is a layout: a small visual beside flexible text, such as an activity update, biography or comment header. Quote owns quotation text and attribution; it can use Media to arrange an attribution photo beside a name.

Try it Round the image

Alex added a new illustration

The updated homepage artwork is ready for review.

Project activity · 5 minutes ago

HTML

<div class="media"><img class="media-avatar" src="/assets/images/pattern-example.svg" alt="" width="48" height="48"><div class="media-content"><strong>Alex added a new illustration</strong><p>The updated homepage artwork is ready for review.</p><small>Project activity · 5 minutes ago</small></div></div>

Options

Class or attribute	What it does
`media-avatar / media-content`	Fixed visual slot and flexible content.
`--media-gap`	Shared spacing between the visual and its text, including Quote attributions; 10px by default.
`media-avatar.is-rounded`	Opt into a circular avatar; images are square by default.