Tinkering · Teardown

Linked card with actions, exploded

The linked card pattern I stashed from Eric Bailey's Piccalilli article only works because of paint order. That's hard to see in the CSS and easy to see when you pull the card apart. Every layer below maps to a rule in that snippet.

Open the drawing full screen

Bottom to top

The numbers match the callouts and the parts list in the drawing.

  1. 1 · Card.clickable-card { position: relative; } makes the card the containing block, so anything absolutely positioned inside it measures against the card.
  2. 2, 3 · Title link and supporting text.card-link { position: static; } keeps the link out of the way. Its pseudo-element skips past it and stretches to the card instead of the link's own box.
  3. 4 · Stretched ::beforecontent: ""; position: absolute; inset: 0; lays an invisible plate over the whole card. Positioned elements paint above flow content, so a click anywhere on the text or empty space lands on the link.
  4. 5, 6 · Action button and secondary linkposition: relative; z-index: 1; lifts every other interactive element above that plate, so they keep their own clicks.
  5. 7 · Focus ring.clickable-card:focus-within { outline: 2px solid currentColor; outline-offset: 2px; } belongs to the card itself, so it stays with the card when everything else lifts off.

Try it

Switch between Exploded and Assembled, zoom in on the labels, isolate a layer from the parts menu, or fill layers with color. The download button exports the current view as SVG, PNG or PDF.

How it was made

The drawing comes from the teardown skill in Jakub Krehel's skills. It's a concept drawing: the layers are real CSS, but their thickness and spacing are made up so the stack reads.