repeated-component-alignment

# Repeated Component Alignment When a component is rendered many times — a card grid, a list, a table, a nav menu, a row of KPI tiles, a feed — it stops being a single box and becomes a **pattern**. The value of a pattern is rhythm: the eye learns the layout once and scans the same slot across every instance (the title row, the price row, the action row). Variable content length breaks that rhythm unless the component is built to absorb it. The principle is general. A **card** is the most common case, but the same rule governs list rows, table cells, nav items, tiles, comment entries, dashboard widgets, search results — anything repeated. Treat each as a **fixed slot model**, not a free-form container. The goal: **content of any length, instances that look identical.** This is partly content production (write to a target length) and partly layout engineering (build slots that tolerate the variance). This skill covers the layout half and where the two meet. --- ## The Slot Model Name the slots once and treat them as a contract every instance honours. A product card, as a worked example: ``` ┌──────────────────────┐ │ [media] │ ← fixed aspect ratio │ │ ├──────────────────────┤ │ ● Badge │ ← optional slot, space reserved │ Title │ ← clamp to N lines │ Subtitle / meta │ │ │ │ Description text… │ ← flexible slot, grows │ │ ├──────────────────────┤ │ €19.99 ...