Skip to content
heyrav design system
PatternsShipped

Pins & keys

Numbered ink dots on a real screen, with their notes in the text column - nothing is laid over the UI it explains.

Used onProduct beats
  • 1Overdue patients, sorted by value
  • 2One tap sends the recall
Dashboard with two numbered pins12
Show code
<div class="d-case">
  <ul class="keys"><li><span class="k">1</span>Overdue patients, sorted by value</li><li><span class="k">2</span>One tap sends the recall</li></ul>
  <div class="pins"><img class="d-pinimg" src="../assets/img/dash.webp" alt="Dashboard with two numbered pins" width="900" height="595" loading="lazy"><span class="pin d-pin1">1</span><span class="pin d-pin2">2</span></div>
</div>

Pins position with --x/--y percentages and carry a 5px halo of 14% ink so they read on any screenshot.