Skip to content
heyrav design system
ComponentsShipped

Card

Cards are read, not clicked: flat paper, a hairline, no hover. When a card is a link, the border darkens - nothing lifts.

Used onFindings cardsCase nav
Finding 01The page asked before it showed

The form sat above the product, so visitors were asked for a number before they knew what it bought.

No subhead, so the sentence itself has to carry the card - it goes to ink.

Show code
<div class="cards">
  <div class="card"><i>Finding 01</i><b>The page asked before it showed</b><p>The form sat above the product, so visitors were asked for a number before they knew what it bought.</p></div>
  <div class="card plain"><p>No subhead, so the sentence itself has to carry the card - it goes to ink.</p></div>
</div>
Case studyIRBS

Room bookings inside OneStop.

 Case studyDentomate

A recall loop for dental clinics.
Show code
<div class="cards">
  <a class="card" href="#"><i>Case study</i><b>IRBS <svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg></b><p>Room bookings inside OneStop.</p></a>
  <a class="card" href="#"><i>Case study</i><b>Dentomate <svg class="icon" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg></b><p>A recall loop for dental clinics.</p></a>
</div>

Anatomy

PartElementStyle
Eyebrow<i>Mono 12, .14em, --ink-3
Title<b>24 / 450 / -.015em
Body<p>18 / 1.6, --mut (ink on .plain)
Shell.card20 padding, --r-md, 1px --line

<i> is legitimate inside .card as the eyebrow; it is only chrome inside .impact, where there are no sublabels.