Vanilla Breeze

figcaption

The figcaption element provides a caption or legend for the content of its parent figure element.

Description

The <figcaption> element represents a caption or legend describing the contents of its parent <figure> element. It can appear as the first or last child of the figure, and there can only be one figcaption per figure.

Vanilla Breeze styles figcaption with muted text color and smaller font size, with variants for alignment and visibility.

When to Use

  • Image descriptions - Explain what an image shows or why it's relevant
  • Photo credits - Attribution for photographers or image sources
  • Figure numbering - "Figure 1:", "Chart 2:", etc.
  • Code file names - Identify the source file for code examples
  • Quote attribution - Identify the source of a quotation
  • Data sources - Credit the source of chart or graph data

Placement

Figcaption can appear at the beginning or end of a figure.

Caption After Content (Default)

Mountain landscape
Caption appears after the image content.

Caption Before Content

Caption appears before the image content.
Ocean view

Variants

Default (Start-aligned)

Default alignment
Default caption is start-aligned (left in LTR).

.centered

Centered caption
Centered caption text.

.end

End-aligned caption
End-aligned caption text.

.hidden (Visually Hidden)

Provides caption for screen readers without visible display.

Image with hidden caption

The figure above has a visually hidden caption.

Caption Content

Figcaption can contain various types of content.

Simple Text

Simple caption example
A simple text caption describing the image.

Figure Numbering

Numbered figure
Figure 1: Mountain landscape at sunset.

With Links

Caption with link
Photo by John Doe on Unsplash.

With Citations

Historical photo
The Great Wave off Kanagawa by Hokusai, c. 1831. Source: Metropolitan Museum of Art

Multi-line Captions

Detailed caption example
Figure 3: Sales performance by region.
Data collected Q1-Q4 2025. Source: Internal analytics.

Rich Content

Rich caption example

Team photo at annual retreat

Left to right: Alice (Engineering), Bob (Design), Carol (Product). Photo taken at Lake Tahoe, December 2025.

Context-Specific Captions

Code Example

In code figures, captions typically show the filename.

const sum = (a, b) => a + b;
console.log(sum(2, 3)); // 5/code
utils/math.js

Quote Attribution

In quote figures, captions provide attribution.

Design is not just what it looks like and feels like. Design is how it works.
Steve Jobs

Chart/Graph Source

Chart 1: Monthly active users (2025). Source: Google Analytics

Video Description

Video: Product demo walkthrough. Duration: 5:32 | View transcript

Accessibility

Role in Accessibility

When a <figure> contains a <figcaption>, screen readers announce the figure and its caption together, providing context for the content.

Alt Text vs Figcaption

These serve different purposes and shouldn't duplicate each other:

Attribute/Element Purpose Audience
alt Describes the image itself Screen reader users (replaces image)
<figcaption> Provides context about why the image is shown All users (supplements image)

Visually Hidden Captions

Use .hidden when captions are needed for accessibility but not visually.

Related

  • <figure> - Parent element that contains figcaption
  • <img> - Images that figcaptions describe
  • <blockquote> - Quotations that may have figcaption attribution

CSS Reference

Styles defined in /src/native-elements/figure/styles.css

Selector Properties
figcaption font-size: var(--font-size-sm); color: var(--color-text-muted); margin-block-start: var(--size-s);
figcaption.centered text-align: center;
figcaption.end text-align: end;
figcaption.hidden position: absolute; clip: rect(0,0,0,0); etc.
figure.bordered > figcaption margin-block-start; padding-block-start; border-block-start;
figure.code > figcaption padding; background; border-radius; font-family: mono;
figure.quote > figcaption font-style: normal; ::before adds em-dash;
↑