┌──────────────────────┐
│ [media]              │  ← fixed aspect ratio
│                      │
├──────────────────────┤
│ ● Badge              │  ← optional slot, space reserved
│ Title                │  ← clamp to N lines
│ Subtitle / meta      │
│                      │
│ Description text…    │  ← flexible slot, grows
│                      │
├──────────────────────┤
│ €19.99      Read more│  ← anchor, pinned to bottom
└──────────────────────┘

• Every slot has a fixed position, whether or not it has content in a given instance.
• One slot absorbs the variance (usually the description/snippet). All others are fixed or clamped.
• Anchor elements are pinned — the primary action or value (CTA, price, status, trend) sits at the same position in every instance regardless of how much content is above or beside it.

1. Reserve the slot — always render the container at a fixed size, empty when there is no content:

.item__badge-row {
  min-height: 24px;        /* always occupies the row */
}

1. Overlay the slot — position it absolutely so it never participates in the flow:

.item__badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
}

.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;            /* needed inside a flex row to allow shrinking */
}

• Native tooltip for plain text:

  <span title="Full value here">…</span>

  . Zero cost, works everywhere, but hover-only (not touch) and unstyled.
• Custom tooltip when you need touch support, styling, or rich content.
• Reveal in place when the full content is the point — a "Read more" toggle that expands the instance or opens a detail view, rather than permanently hiding text the user needs.

Only attach a tooltip when text is actually truncated — a

title

on a string that fits adds a redundant hover. Detect overflow (

scrollWidth > clientWidth

) and set

title

conditionally.

1. Write to length — the cleanest fix. Give content authors a target (e.g. titles ≤ 60 chars, snippets ≤ 120) so most values never need truncating. Layout tricks are a safety net, not the primary plan.
2. Clamp + recover — when authored length cannot be guaranteed (user-generated, third-party feeds, i18n expansion).
3. Let one slot grow — for the single slot allowed to vary, absorb the variance with flex rather than truncating, and pin everything after it.

• Is the repeated component a defined slot model — every instance fills the same slots in the same order?
• Are sibling instances equal size via a stretched grid/flex track, not a hard-coded height?
• Is the anchor (CTA / price / status / value) pinned —

  margin-top: auto

  for columns,

  margin-left: auto

  for rows — so it aligns across instances?
• Does exactly one slot absorb length variance, with the rest fixed or clamped?
• Do optional slots (badge, label) reserve space or overlay, so they never shift the slots after them?
• Does media use a fixed

  aspect-ratio

  so its size never varies?
• Are multi-line slots clamped to a line count and single-line values ellipsised?
• Do flex rows that truncate have

  min-width: 0

  so the text is allowed to shrink?
• Is the full value recoverable (title/tooltip/reveal) wherever text is truncated?
• Is the tooltip applied only when the text actually overflows?
• Do content authors have target lengths, so truncation is a safety net rather than the norm?
• Have slots been checked against the longest-translating locale, not just the source language?