Figures

The .figure and .figure-caption classes add baseline styles to the HTML5 <figure> and <figcaption> elements. .figure lays out its children as a flex column with a configurable gap; .figure-caption applies a smaller, muted type style. Images in a figure have no implicit sizing — add .image.fluid to make the image scale with its container.

<figure class="figure">
<img src="..." class="image fluid rounded" alt="...">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

Alignment

Since .figure is a flex column, flex utilities control how the image and caption align on the horizontal axis.

<figure class="figure align-items-end">
<img src="..." class="image fluid rounded" alt="...">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

Adding .d-inline-flex collapses the figure's width to its content, so the caption aligns relative to the image's edge rather than the parent container.

<figure class="figure d-inline-flex align-items-end">
<img src="..." class="image fluid rounded" alt="...">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>

Attribution

Apply .attribution to <figcaption> to render the credit in cite-style type with an em dash prepended automatically. Wrap author or title names in <cite> for correct semantics.

<figure class="figure align-items-center">
<img src="..." class="image fluid rounded" alt="...">
<figcaption class="attribution">A <cite title="Great Work">Great Work</cite> of Famous Painter.</figcaption>
</figure>

CSS

The Figure component can be customized through Sass variables at compile time.

Custom properties

The Figure component exposes CSS custom properties to control its appearance at runtime.

--cx-gap: var(--cx-figure-gap, calc(var(--cx-space-medium) * 0.5));
--cx-caption-font-size: var(--cx-figure-caption-font-size, var(--cx-font-size-small));
--cx-caption-line-height: var(--cx-figure-caption-line-height, var(--cx-line-height-small));
--cx-caption-fg-color: var(--cx-figure-caption-fg-color, var(--cx-fg-subtle));

Sass variables

The Figure component uses Sass variables in scss/config/_defaults.scss to define its defaults.

$figure-gap:                  calc(var(--space-medium) * .5);
$figure-caption-font-size:    var(--font-size-small);
$figure-caption-line-height:  var(--line-height-small);
$figure-caption-fg-color:     var(--fg-subtle);