Media Object
A layout primitive pairing a fixed media element (image, avatar, icon) with a flexible text block. The foundation of comment threads, feeds, and profile rows.
Molecule
Avatar · Icon
When To Use
- Use Media Object when information needs to be scanned quickly and compared across multiple rows, cards, or values.
- Choose the example that best matches whether the user is browsing, monitoring, or drilling into structured data.
- Lean on these patterns when you want consistent spacing and hierarchy before tuning the visual treatment.
When Not To Use
- Do not use a dense data pattern when the primary task is storytelling, onboarding, or one-off explanation.
- Do not flatten nuanced data into a compact summary card if the user still needs the underlying structure to make a decision.
Accessibility Notes
- Maintain heading order and region labels so the surrounding layout stays understandable when styles are stripped away.
- Avoid using visual grouping alone to explain hierarchy; expose the structure semantically as well.
- Make sure drag, resize, and reorder interactions have keyboard alternatives when they are part of the core task.
Key Props / API
Props
media, children, mediaPosition, align, gap, className
Example Code
import { MediaObject } from "@hilum/ui"
<MediaObject media={<img className="size-16 rounded-lg" src="..." alt="" />}>
<h4 className="heading text-ground-900">Lorem ipsum</h4>
<p className="mt-1 body text-ground-500">
Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam
expedita quia omnis voluptatem.
</p>
</MediaObject>Media Object · Basic
Left media
Image on the left, content on the right
Lorem ipsum
Repudiandae sint consequuntur vel. Amet ut nobis explicabo numquam expedita quia omnis voluptatem.
Media Object · Right
Media on right
mediaPosition='right'
Media on the right
Content flows on the left, with the image anchored to the right side.
Media Object · Centered
Center-aligned avatar
Avatar + name/email row
Bethany Blake
2 hours ago
Tom Cook
45 minutes ago
Martha Gardner
10 minutes ago
Media Object · Comment thread
Bethany Blake
2 hours agoThis is looking great! I especially love the updated color palette — it feels much more cohesive.
Tom Cook
45 minutes agoAgreed. The typography hierarchy is a big improvement. Ready to merge.
Martha Gardner
10 minutes agoShipped to staging! Let me know if there are any issues.
Comment list
Common pattern: avatar + author + content