Tabs .ktab

The everyday tab pattern for primary view switching. Hairline baseline across the whole row; active item gets a 3 px crimson bar that slides between items, overlaying the baseline. Optional left icon and right count badge per item.

Wraps onto multiple rows; ideal for many-option tab strips. Active pill is filled with brand crimson and cream text — strong wayfinding, matches the Settings-screen pattern in the App. Hover lifts text to crimson on a faint paper tint.

Compact iOS-style. Paper-2 background, active item lifts to a card-on-paper with a soft shadow. Use for view-mode switches, density toggles, narrow sets of mutually exclusive choices.

Items stack; the indicator is on the left edge. Used inside narrow rails (Settings sidebar, App secondary nav). Active row also gets a faint paper-2 fill for confident wayfinding.

Three heights: 32 (sm) · 44 (default, iPad-grade) · 52 (lg, for hero rows). All three variants pick up the size modifier.

Real-world: tabs sit above a card, the card embeds a table edge-to-edge via .kc-body-flush. One coherent surface.

Click the underline tabs below to switch panels. The primitive itself is markup-only; this small script toggles aria-selected and shows the right [role=tabpanel]. Drop in any framework's state bindings and it works the same way.