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.comThis is a reinterpretation, not a copy. The source was a location card backed by a blurred landmark photo. Here the reveal mechanic is the component and the subject is not — the base card is content-agnostic (an article, a plan, a changelog), and the location treatment is a --map modifier layered on top: an abstract duotone mesh with contour rings and a pulsing pin, so the map is drawn rather than photographed.
The label is the only thing visible at rest, sitting at the bottom edge. On hover the whole bottom panel grows upward (grid-template-rows: 0fr -> 1fr on a clipped region), so the label rises and the details arrive underneath it in the space it vacated. Nothing fades in on top of anything — the layout itself moves, which is why it reads as one motion instead of four.
cubic-bezier(0.16, 1, 0.3, 1) over ~420ms: a fast launch and a quick settle, so the panel appears to decelerate into place. Disclosed rows follow at 55ms intervals. The delays are declared only in the hover/open state, so leaving snaps back immediately — an exit that staggers feels broken.
The accent ↗ fades and drifts up-right as the details arrive, while a → grows in from zero width to the left of the label, pushing it right. One saturated colour, moved around the card rather than repeated.
Geometric sans at 28px/600 for the title; monospace, uppercase, 0.18em tracking for every label, badge, kicker and meta line. The tracking is what sells it — at 12px with normal spacing the same text reads as small body copy, not as a label.
Separators are a 1px linear-gradient(to right, rule, transparent) used as a background, not a border. A full-width border would draw a hard box edge; the fade keeps the detail rows feeling like they float on the artwork.
notes.md — the full record, including what was tried and dropped