Editorial Layout
Editorial layouts are authored compositions, not algorithms that invent personality. Keep spans, offsets, whitespace and item ranges explicit so a designer can review the result at every breakpoint.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Source order
Authored composition
Editorial Layout · hierarchy changes without losing order
Editorial layouts are authored compositions, not algorithms that invent personality. Keep spans, offsets, whitespace and item ranges explicit so a designer can review the result at every breakpoint.
Use asymmetry to establish hierarchy, preserve source order in the DOM, and flatten on compact screens when the composition would otherwise harm scanning.
Source: packages/skills/patterns/editorial-layout.md