2026-09 · Card
A bottom panel that grows upward on hover, pushing the resting label up ahead of it. The base card is content-agnostic; everything below is the same component, differing only by custom properties and modifiers.
The base card at rest, and the same card pinned open.
Default
hover, focus or press it
Field Notes Issue 04 Read the essay On details that survive a redesign 18 pages, illustrated Published March 2026 Written in the studioRevealed
.detail-reveal-card--open
Studio Popular What’s included Unlimited projects Up to 10 collaborators Priority support Response within one dayOne baked modifier, and one re-theme done from outside by overriding custom properties — component.css is untouched.
Dark
.detail-reveal-card--dark
Changelog v2.4 See what shipped Keyboard navigation everywhere Eleven fixes, two new panels Released this week No migration neededAmber — longer content
--…-bg, --…-accent, --…-art
Workshop Nov 12 View the schedule Two full days of building small interfaces from scratch Bring a laptop and something half-finished Lunch and materials included Sixteen seats, first comeThe same card with an abstract map behind it — a duotone mesh, contour rings, and a pin that pulses at rest. Add the __pin element, and a __kicker line for coordinates. The pin origin moves with --…-pin-x / --…-pin-y, and the rings follow it.
Map
.detail-reveal-card--map
Denmark GMT+2 Copenhagen 55.6761° N · 12.5683° E 14 Placeholder Street 1050 Copenhagen K +45 00 00 00 00 hello@example.comMap, re-themed
--map + --…-accent, --…-art, --…-pin-x/y
Canada GMT-8 Vancouver 49.2827° N · 123.1207° W 70 Placeholder Way Vancouver, BC V6B +1 000 000 0000 vancouver@example.comMap + dark
.detail-reveal-card--map.detail-reveal-card--dark
Japan GMT+9 Tokyo 35.6762° N · 139.6503° E 3 Placeholder Building, 8F Shibuya, Tokyo 150 +81 00 0000 0000 tokyo@example.com