Media
A row that pairs media with text and an action.
Basic
Drop .media__figure, .media__content, and .media__action as direct children. The row sits on the surface fill with a hairline border and a comfortable padding floor.
Title, description, meta
Stack a .media__meta below the description for a secondary line at a smaller font in muted-foreground. An avatar in the figure reads as an actor.
Vertical
Add .media--vertical to stack the parts top to bottom. The action's auto inline-end pin drops and parts align to the row's start. Useful for stat tiles.
Seamless rows in a card
Stack .media--seamless rows inside a .card. The seamless items shed their own border and background and pick up the card padding, so the row edges line up with the card header. Each row stays its own row; the card stays one frame; a .separatorbetween rows adds the dividing line.
Notification settings
Same flush stack, with an .icon-box in the figure and a .switch in the action slot. Each row reads as a setting whose state lives in the switch.
Payment methods
Brand glyph in the figure, last-four in the title, expiry in the meta. The action slot can hold a badge instead of a button, or no action at all.
File list
Two actions in the action slot work the same as one. The flex gap inside .media__action spaces them; both pin to the inline end as a single group.
Standalone rows
Standalone items, with their own border and surface fill, sit well as a freestanding list outside a card. Image in the figure, price as the meta line, the action pinned to the inline end.
Card-style radio
Add .media--selectable and wrap the row in a <label> around a native .radio so the whole row becomes one option. The modifier turns on the hover, focus, and selected paint; the state itself rides the native :checked, so keyboard, grouping, and screen-reader semantics come for free. The border carries the selected signal and the fill washes to the highlight tint.
Card-style checkbox
Same shape with a .checkbox selects many. A row whose control is disabled dims and drops its hover wash while the rest of the group stays live.
Listbox option
When a framework owns the state, keep .media--selectable and drive selection from aria-selected (or aria-checked / aria-pressed) on the row instead of a native control. The same selected paint applies. Here a check glyph marks the chosen row in an assignee list.
Customization
These variables retune .media without touching component CSS. Override on the row, a parent scope, or :root. Inside a .card, the flush variant additionally reads the card's --card-padding-inline so the row's inline edges align with the card header and footer.
| Variable | Use |
|---|---|
--media-radius | Corner radius; cleared to 0 by --seamless |
--media-padding-block | Top and bottom padding |
--media-padding-inline | Left and right padding; a flush row inside a card aligns to the card's inline padding |
--media-gap | Spacing between figure, content, and action |
--media-bg | Background; cleared to transparent by --seamless |
--media-color | Text color |
--media-border-width | Border thickness; cleared to 0 by --seamless |
--media-border-color | Border color |
--media-bg-hover | Background on hover or keyboard highlight of an interactive or selectable row |
--media-bg-selected | Fill of a selected row (checked, pressed, or aria-selected) |
--media-border-color-selected | Outline color of a selected row; drawn as an inset ring so it shows even where a container has flattened the border |
--media-disabled-opacity | Dimming applied to a disabled selectable row |