Mark, Abbr & Figure

The design system styles three semantic HTML elements for inline and block-level content enrichment.

Highlighted text (mark)

The <mark> element highlights text with a yellow background. In dark mode, the background shifts to a semi-transparent yellow.

<p>This is <mark>highlighted text</mark> within a paragraph.</p>

Abbreviations (abbr)

The <abbr> element indicates an abbreviation or acronym. It renders with a dotted underline and shows the full text on hover via the native title attribute.

<p>The design system uses <abbr title="Cascading Style Sheets">CSS</abbr> custom properties.</p>

Figure and figcaption

The <figure> element wraps media content (images, code blocks, diagrams) with an optional <figcaption> for descriptive text.

<figure>
  <img src="image.jpg" alt="Description">
  <figcaption>Caption text describing the image above.</figcaption>
</figure>

Accessibility

• <mark> is announced by some screen readers as "highlighted" — use it for genuinely highlighted content, not for visual styling
• <abbr> with title shows its expansion on hover — for critical abbreviations, spell out the full term on first use in the text
• <figure> images must have meaningful alt text; <figcaption> provides supplementary context, not a replacement for alt

Usage rules

Do:

• Use <mark> for search result highlights or key phrases
• Use <abbr> for technical acronyms with a title attribute
• Use <figure> for any media that benefits from a caption

Don't:

• Don't use <mark> as a general-purpose text highlighter for emphasis — use <strong> or <em>
• Don't omit title on <abbr> — it is the only way to convey the expansion
• Don't use <figcaption> without a parent <figure>

CSS reference

This section documents how each element is built. For usage, see the sections above.

mark

Dark mode ([data-theme="dark"]): background shifts to color-mix(in srgb, var(--yellow), var(--alpha-60)), colour to var(--off-white).

abbr[title]

figure

figcaption

Selectors