Media object

How to use it

Use for repeated items that pair a small image with text, such as comments, reviews, notifications or search results. Do not use it when the image is the main content (use a card or a figure). Replace the SVG with your avatar or thumbnail (an <img> needs real alt text, or alt="" if a name is next to it) and the datetime value; below 30rem the image stacks above the text.

Accessibility

Plain document structure: an <article> with a heading for the author, a <time> element with a machine-readable datetime, and a paragraph, so the reading order matches the visual order at every width. The avatar is a decorative inline SVG with aria-hidden="true", because the name is already given as text next to it. The name is #0f172a on #ffffff (17.85:1), the date #475569 on #ffffff (7.58:1) and the body text #334155 on #ffffff (10.35:1).

Source (copy-ready)

Copy code

<article class="dcl-media-object">
  <svg class="dcl-media-object__figure" viewBox="0 0 48 48" width="48" height="48" aria-hidden="true" focusable="false">
    <circle cx="24" cy="24" r="24" fill="#1d4ed8"/>
    <circle cx="24" cy="19" r="8" fill="#dbeafe"/>
    <path d="M10 40c2-8 8-12 14-12s12 4 14 12" fill="#dbeafe"/>
  </svg>
  <div class="dcl-media-object__body">
    <h3 class="dcl-media-object__name">Priya Raman</h3>
    <time class="dcl-media-object__meta" datetime="2026-11-04">4 November 2026</time>
    <p class="dcl-media-object__text">The new export option saved me an afternoon. It would help if the file name included the date range I picked.</p>
  </div>
</article>
<style>
.dcl-media-object { display: flex; align-items: flex-start; gap: 0.875rem; max-width: 36rem; padding: 0.75rem 0; font: inherit; color: #0f172a; background-color: #ffffff; }
.dcl-media-object__figure { flex: none; width: 3rem; height: 3rem; max-width: 100%; }
.dcl-media-object__body { flex: 1 1 auto; min-width: 0; }
.dcl-media-object__name { margin: 0; font-size: 1rem; color: #0f172a; background-color: #ffffff; }
.dcl-media-object__meta { display: block; margin-top: 0.125rem; font-size: 0.8125rem; color: #475569; background-color: #ffffff; }
.dcl-media-object__text { margin: 0.5rem 0 0; overflow-wrap: anywhere; color: #334155; background-color: #ffffff; }
@media (max-width: 30rem) {
  .dcl-media-object { flex-direction: column; }
}
</style>