Figures

Base styling for the <figure> and <figcaption> elements. No classes required — the base layer applies sensible defaults automatically.

Default figure

The <figure> element receives zero top and inline margins and a bottom margin of one rhythm line (24px), removed when it is the last child of its container. The <figcaption> uses the UI font at small body size with muted colour and an 8px top margin.

index.htmlhtml

<figure>
  <img src="/placeholder.svg" alt="Example figure image">
  <figcaption>A descriptive caption for the image above.</figcaption>
</figure>

Figure with code

Figures can wrap any block content, not just images. Use them to annotate code samples, diagrams, or embedded content.

<figure>
  <pre><code>@use 'ln/scss' with ($prefix: 'my-');</code></pre>
  <figcaption>Importing the library with a custom prefix.</figcaption>
</figure>

@use 'ln/scss' with ($prefix: 'my-');

Reference