Figures

Display a piece of content — usually an image — alongside a caption. Compose Figure with FigureImage and FigureCaption to get the .figure wrapper, the figure image spacing, and the muted caption.

Import

tsx

import { Figure, FigureImage, FigureCaption } from '@metatoy/bootstrap-styled';

Figure with caption

Figure is an inline-block <figure> wrapper; FigureImage is the <img> inside it (add the <Image fluid> behavior or an inline max-width for responsiveness); FigureCaption is the muted <figcaption> below.

Aligning the caption

Figure, FigureImage, and FigureCaption are plain styled elements, so align the caption with a native style (or a text-alignment utility class) on FigureCaption.

Props

Figure, FigureImage, and FigureCaption are bare styled elements — they ship no custom props. Each accepts all native attributes of its underlying tag (<figure>, <img>, <figcaption>) and can be retargeted with the styled-components as prop. For responsive figure images, either render FigureImage with an inline max-width: 100% / height: auto, or use the Image component with fluid.

tsx

<Figure>
<FigureImage as={Image} fluid src="…" alt="…" />
<FigureCaption>A caption for the image above.</FigureCaption>
</Figure>

Theming

FigureCaption reads --bs-secondary-color for its muted text color; FigureImage carries figure-specific spacing only, and inherits image shape tokens (--bs-border-radius) when you compose it with the Image helpers. Override --bs-secondary-color on a theme or scoped subtree to reshade captions.

Accessibility

Use a real <figure>/<figcaption> pairing (the default here) so assistive tech associates the caption with the image. Provide a meaningful alt on FigureImage; the caption complements the alt rather than replacing it, so avoid repeating the same text in both.

Explore in Ladle

Browse the figure example in the interactive component gallery: Open in Ladle.