Media

Puts a figure beside a block of text and stacks them when the text would drop below half the width; the one-class form of a sidebar holding a frame and a stack.

Example

View Code 
<div class="media" data-width="sm">
    <img src="ada.jpg" alt="Portrait of Ada Lovelace">
    <div>
        <h3>Ada Lovelace</h3>
        <p>Wrote the first published algorithm, for Babbage's Analytical Engine.</p>
    </div>
</div>

When to use it

A comment with an avatar, a product with its thumbnail, a speaker with a headshot: whenever a picture sits beside a few lines of text, this is the shape. It stays side by side while the text keeps at least half the width and stacks when it cannot. Put the picture first for picture-left, last for picture-right; the reading order follows. The body must not have an img, video, or picture as a direct child (it would be taken for a second figure).

Built from primitives

A recipe is a shortcut, not a new idea. The same result is three layouts you already know: a sidebar whose first child is a frame and whose second is a stack. Reach for this form when you want to change any part of it, since every knob is an attribute you can see.

<div class="sidebar" data-width="sm">
    <div class="frame" data-ratio="1/1">
        <img src="ada.jpg" alt="Portrait of Ada Lovelace">
    </div>
    <div class="stack" data-gap="sm">
        <h3>Ada Lovelace</h3>
        <p>Wrote the first published algorithm, for Babbage's Analytical Engine.</p>
    </div>
</div>

The one-class form renders the same geometry, and its test proves it. Its attributes are the ones the primitives take. Its CSS is its own file, so a project that prefers the composed form can leave css/recipes/media/media.css out of a hand-built bundle. One difference: the sidebar's data-side picks which child is the sidebar, while the recipe's data-side moves the figure with order, which changes where it sits but not where it is read.

Why this name

Nicole Sullivan named the media object in 2010 and the name stuck across a decade of frameworks, Foundation 6's .media-object included. One word of it is enough.

Attributes

Attribute Type Values Default Description
data-width enum 2xs, xs, sm, md, lg, xl, 2xl xs The figure's preferred width.
data-ratio enum 1/1, 4/3, 3/2, 16/9, 21/9 1/1 The figure's aspect ratio.
data-gap enum none, xs, sm, md, lg, xl, 2xl, 3xl, xs-sm, xs-md, xs-lg, xs-xl, xs-2xl, xs-3xl, sm-md, sm-lg, sm-xl, sm-2xl, sm-3xl, md-lg, md-xl, md-2xl, md-3xl, lg-xl, lg-2xl, lg-3xl, xl-2xl, xl-3xl, 2xl-3xl md Space between the figure and the text.
data-align enum start, center, end, stretch, baseline stretch Vertical alignment of figure and text when side by side.
data-side enum start, end Force the figure to the start or the end regardless of source order. Moves it visually only; reading order stays as written.

Children

  • > *: exactly 2. Exactly two: the figure (an img, video, or picture, or an element wrapping one) and the body; the body must not have an img, video, or picture as a direct child (it would be taken for a second figure). A figure with a figcaption keeps its caption below the picture.

Tokens

Token Description
--yeti-width-xs The default figure width.
--yeti-space-md The default gap.
--yeti-space-sm The gap between the body's children.
--yeti-text-sm Text size of the caption.
--yeti-color-text-muted The caption.
Internal tokens (may change between minor versions) - `--_yeti-gap` - `--_yeti-width` - `--_yeti-align` - `--_yeti-aspect`

Accessibility

  • The figure is cropped to its ratio, so alt text should describe what is visible. data-side changes where the figure sits, not where it is read.

Browser support

  • Used without guards: flexbox gap, aspect-ratio, object-fit, :has()
  • Behind @supports: nothing

JavaScript

None. This component is CSS only.

Available since 7.0.0.