Skip to content
heyrav design system
ComponentsShipped

Glossary term

A term the reader may not know, defined in place on click - the sentence stays short and nobody leaves the page.

Used onCase pagesHome

The page converted through a placed under the fold.

Show code
<p class="prose">The page converted through a <span class="define"><button class="define-t" aria-expanded="false" aria-controls="def-1">CTA<svg class="define-i" viewBox="0 0 256 256" aria-hidden="true"><path d="…"/></svg></button><span class="define-box" id="def-1" role="note" hidden>Call to action - the one button a section wants you to press.</span></span> placed under the fold.</p>

Behaviour

  • A real <button> with aria-expanded and aria-controls; the box is hidden until opened.
  • One open at a time; outside click or Escape closes and returns focus.
  • The Phosphor Info glyph is one shape, so nothing sits off-centre the way a bordered "i" did.

Use it for one or two terms per page. If every paragraph needs one, the copy needs rewriting instead.