New: Cookbooks and AI ExplanationsStep-by-Step recipes to solve problems connected to Roadmaps and Cheat Sheets. Need more details? Use AI buttons for structured and simple explanations with concrete examples throughout the whole platform.Take a look
A comment thread needs an avatar next to some text. So does a notification, and a settings list row.
What you'll have at the end
One shared set of media-object classes, a row, an avatar slot, and a text column, reused across a comment row, a notification row, a settings row, and a nested reply, with each new row adding only its own avatar size, one alignment rule the icon rows share, and one settings-only trailing slot.
You need
A page or component library where an image sits beside a block of text in more than one place, an avatar next to a comment, an icon next to a notification, a leading icon next to a settings label, and a stylesheet you can add shared classes to.
Not covered
Clipping one overlong line to a single ellipsis and building the comment thread's own posting and replying behavior are both out of scope; this covers only the shared layout classes an image-and-text row is built from.
Leans on
Truncate overflowing text with an ellipsis
for a single line, a name or label, that should end in one clean ellipsis instead of wrapping across lines, that recipe covers the exact minimum-width and ellipsis combination.
Split a navigation bar into two groups with Flexbox
for pushing a whole group of links to the far edge of a page-level bar instead of one item inside a single row, that recipe covers the larger-scale version of the same auto-margin trick.
Checked 20 Aug 2026
Part of the CSS cookbook