Media | Brio

The Media composition is used for composing the common image + text row. Use it for alerts, notifications, comments, and other figure + text like rows.

Quirk worth knowing: .media-body sets min-inline-size: 0 deliberately. Without it, a flex child's minimum size defaults to its content's intrinsic size, which means long unbreakable strings (URLs, monospace code, long words) force the media row wider than its container instead of wrapping. Debugging "why is this overflowing" in a .media row often comes back to a child that has lost this property through an override. So, keep this in mind.

A second tweak: headings inside .media-body get line-height: 1 so the heading's glyph-top aligns with the figure's top. Normal heading line-height (1.2) would leave the heading visually sitting lower than the figure.

Examples

Figure-plus-text composition

A leading icon, image, or another figure paired with growing body text. Used by alert and toast veneers.

<div class="media">
        <svg
            class="media-figure"
            xmlns="http://www.w3.org/2000/svg"
            width="40"
            height="40"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
        >
            <circle cx="12" cy="12" r="10" />
            <path d="M12 16v-4M12 8h.01" />
        </svg>
        <div class="media-body">
            <h4>Figure-plus-text composition</h4>
            <p>
                A leading icon, image, or another figure paired with growing body text. Used by
                alert and toast veneers.
            </p>
        </div>
    </div>

The figure slot in detail

.media-figure never shrinks. The body grows and wraps instead. Because the figure is sized by its own content, give it a fixed size when the content can vary For instance, add an explicit width/height on an img, or the sizing utilities on an icon.

Fixed-size figure

The figure keeps its 3rem square regardless of how long the body text runs.

<div class="media">
        <span
            class="media-figure"
            style="
                inline-size: 3rem;
                block-size: 3rem;
                border-radius: var(--radius-circle);
                background: var(--color-primary-subtle);
                color: var(--color-text);
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-weight: var(--font-weight-bold);
            "
            >BR</span
        >
        <div class="media-body">
            <strong>Fixed-size figure</strong>
            <p>The figure keeps its 3rem square regardless of how long the body text runs.</p>
        </div>
    </div>

Reference

Source: src/css/composition.css

Applies to

.media

Slots

Slot	Description
`.media-figure`	The figure region of a .media component: the icon or image half of the row. It never shrinks, and it shifts along the text with --media-figure-start when the alignment needs fine tuning.
`.media-body`	the body region of a .media component: the text half of the row.

Tokens

Token	Default	Description
`--media-align`	`flex-start`	Cross-axis alignment for media children
`--media-gap`	`var(--gutter-relaxed)`	Gap between figure and text
`--media-figure-start`	`0.1rem`	Block-start margin offsetting the figure vertically