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.
<figure> <img src="photo.jpg" alt="..." /> <figcaption>Caption after content</figcaption> </figure>

Caption Before Content

Caption appears before the image content.
Ocean view
<figure> <figcaption>Caption before content</figcaption> <img src="photo.jpg" alt="..." /> </figure>

Variants

Default (Start-aligned)

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

.centered

Centered caption
Centered caption text.
<figure> <img src="photo.jpg" alt="..." /> <figcaption class="centered">Centered caption</figcaption> </figure>

.end

End-aligned caption
End-aligned caption text.
<figure> <img src="photo.jpg" alt="..." /> <figcaption class="end">End-aligned caption</figcaption> </figure>

.hidden (Visually Hidden)

Provides caption for screen readers without visible display.

Image with hidden caption

The figure above has a visually hidden caption.

<figure> <img src="photo.jpg" alt="..." /> <figcaption class="hidden">Screen reader only caption</figcaption> </figure>

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.
<figcaption><strong>Figure 1:</strong> Description text.</figcaption>

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
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)
<!-- Good: Different information in each --> <figure> <img src="chart.png" alt="Bar chart showing sales increasing from $10M in Q1 to $15M in Q4" /> <figcaption> Figure 2: Sales exceeded projections in all quarters. </figcaption> </figure> <!-- Bad: Duplicate information --> <figure> <img src="chart.png" alt="Sales exceeded projections in all quarters" /> <figcaption> Sales exceeded projections in all quarters. </figcaption> </figure>

Visually Hidden Captions

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

<figure> <img src="decorative-divider.svg" alt="" /> <figcaption class="hidden">Decorative section divider</figcaption> </figure>

Related Elements

  • <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;