Skip to content
Pinky UI

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