Media object

Quick implementation

.media {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.media img {
  width: 4rem;
  height: 4rem;
  border-radius: 0.5rem;
  object-fit: cover;
  flex-shrink: 0;
}

.media-body {
  flex: 1;
  min-width: 0; /* prevent text overflow */
}

.media-body h3 {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
  color: oklch(0.92 0.01 260);
}

.media-body p {
  margin: 0;
  font-size: 0.85rem;
  color: oklch(0.68 0.02 260);
  line-height: 1.5;
}

/* Reverse variant */
.media--reverse {
  flex-direction: row-reverse;
}

Prompt this to your LLM

Paste this into ChatGPT, Claude, or any code-generating model to scaffold the pattern instantly.

Create a media object component using CSS flexbox. The
container uses display: flex with gap: 1rem and
align-items: flex-start. The image is 4rem square with
border-radius: 0.5rem, object-fit: cover, and
flex-shrink: 0 so it never compresses. The text body has
flex: 1 and min-width: 0 to prevent overflow. Include a
heading and paragraph with oklch() colors. Add a
.media--reverse modifier that uses flex-direction:
row-reverse to put the image on the right.

Why this matters

The media object is one of the most repeated patterns on the web. It appears in comment threads, article cards, notification lists, user profiles, and search results. Originally popularized by Nicole Sullivan's OOCSS, the modern flexbox version is simpler, more robust, and handles content overflow naturally. Having this pattern in your toolkit avoids reinventing it on every project.

The logic

The flex container aligns the image and text body side by side. The image uses flex-shrink: 0 to prevent the browser from compressing it when space is tight. object-fit: cover ensures different-ratio source images always fill the square without distortion. The text body uses flex: 1 to fill all remaining space and min-width: 0 to allow text truncation and prevent the flex child from overflowing its container. The gap property replaces old margin-based spacing, and flex-direction: row-reverse on the modifier class flips the layout without changing HTML order.

Accessibility & performance

Always provide a descriptive alt attribute on the image. If the image is purely decorative (such as a generic category icon), use alt="" so screen readers skip it. Ensure the heading hierarchy inside the media body follows the document outline. For performance, use the loading="lazy" attribute on images below the fold to defer network requests. The object-fit: cover approach eliminates the need for server-side image resizing while keeping the DOM lightweight.