ThreeCardRow.
Three equal peer cards that are each a link — a display-face title, a muted body that flexes to fill the card, and an accent "go" line with an arrow that slides 3px on hover. The card for the current page takes `data-current` and an `--m-accent-soft` fill.
When to use
Reach for ThreeCardRow when a section offers three parallel destinations of equal weight — three sibling products, three audit agents, three plans — and each one needs its own link. Use FeatureGrid when the cells describe rather than navigate, NumberedCardRow when the cards are ordered, and CaseStudyCard when a single item carries the section.
They sell you a dashboard of your AI spend. We do that, then cut the waste on top, and recover overcharges where they are real.
The card is the anchor — the whole 28px-padded, 16px-radius hairline card is one hit
target, so nothing inside it may be interactive. Hover it and the arrow slides 3px while the
card lifts 3px onto an --m-accent-border hairline; at rest there is no shadow at
all. flex: 1 on the body is what bottoms all three go-lines out on the same
baseline despite different copy lengths.
The first card carries data-current — accent hairline plus an --m-accent-soft fill — which makes the set read as a sibling switcher. That is a
visual affordance only; the site adds no aria-current="page", and neither does this
illustration, since none of these is the current page. The hover shadow is tuned for the dark
band the row sits on.