Media Object
ProA horizontal layout pairing a fixed-width media element (avatar, icon, thumbnail) with flexible text content. A foundational pattern for comments, notifications, activity feeds, and list items that combine imagery with descriptions.
6 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Standard media object with left-aligned media and right-aligned text. | Use for comments, notifications, and list items with avatars. |
| Reversed | Media element on the right side with text on the left. | Use for sent messages in chat interfaces or right-aligned media displays. |
| Centered |
Usage Guidelines
Do
Use the media object pattern for any content that pairs an image with text.
Don't
Use media objects for purely decorative images — use a card layout instead.
Do
Keep the media element a fixed width — let the text content flex.
Don't
Deeply nest media objects — keep nesting to one level maximum.
Do
Align the media element to the top of the text block.
Don't
Force media objects to stretch to fill unusual aspect ratios.
Code
Design Tokens
Accessibility
- Ensure media elements have meaningful alt text describing the person or object.
- Use semantic heading levels within the body content where appropriate.
- Decorative media should use alt="" to be ignored by screen readers.