Skip to main content

Figure

Overview​

The Figure component renders a styled <figure> element with Bulma helper class integration.

Use it to group self-contained content like images, illustrations, diagrams, or code snippets with an optional caption via Figure.Caption.

info

The Figure component is a thin wrapper around the HTML <figure> element with a Figure.Caption subcomponent for <figcaption>.

Import​

import { Figure } from '@allxsmith/bestax-bulma';

Usage​

Default Figure​

The default usage of the Figure component with an image.

<Figure>
  <Image src="/img/bestax-solar-system-3d.png" alt="Placeholder" />
</Figure>

Figure with Caption​

Add a caption using Figure.Caption.

<Figure>
  <Image src="/img/bestax-solar-system-3d.png" alt="Placeholder" />
  <Figure.Caption>This is a caption for the image</Figure.Caption>
</Figure>

Styled Caption​

Apply color and typography helpers to the caption.

<Figure>
  <Image src="/img/bestax-solar-system-3d.png" alt="Placeholder" />
  <Figure.Caption textColor="grey" textSize="7" mt="2">
    Grey caption with smaller text
  </Figure.Caption>
</Figure>

Figure with Background​

Add a background and padding to create a framed effect.

<Figure bgColor="light" textColor="dark" p="4">
  <Image src="/img/bestax-solar-system-3d.png" alt="Placeholder" />
  <Figure.Caption mt="2">Figure with background and padding</Figure.Caption>
</Figure>

Centered Caption​

Center the caption and content using text alignment.

<Figure textAlign="centered">
  <Image src="/img/bestax-solar-system-3d.png" alt="Placeholder" />
  <Figure.Caption textSize="7" mt="2">
    Centered caption
  </Figure.Caption>
</Figure>

Code Figure​

Use Figure to wrap code blocks with captions.

<Figure bgColor="dark" p="4">
  <Pre textColor="white" m="0">
    <Code>{`function hello() {
  console.log("Hello, World!");
}`}</Code>
  </Pre>
  <Figure.Caption textColor="grey-light" mt="2">
    Example code snippet
  </Figure.Caption>
</Figure>

Compound (dot-notation) usage​

The Caption subcomponent is only exposed as the Figure.Caption static, so a captioned figure needs just the single Figure import.

<Figure>
  <Image src="/img/bestax-solar-system-3d.png" alt="Placeholder" />
  <Figure.Caption>Caption via the Figure.Caption static</Figure.Caption>
</Figure>

Accessibility​

  • Image Alt Text: Always provide meaningful alt text for images within figures.
  • Figure Semantics: The <figure> element groups content that is referenced from the main flow but could be moved without affecting the document's meaning.
  • Caption Association: Screen readers associate <figcaption> content with the figure automatically.
info

The <figure> element is ideal for images, illustrations, diagrams, code listings, or anything that is referenced as a unit from the main content.

  • Image: For Bulma-styled images.
  • Pre: For preformatted code blocks.
  • Code: For inline code.
  • Helper Props: Bulma helper props for spacing, color, etc.

Additional Resources​

Props​

Figure Props​

PropTypeDefaultDescription
classNamestring—Additional CSS classes to apply.
textColorBulma color | 'inherit' | 'current'—Text color helper.
bgColorBulma color | 'inherit' | 'current'—Background color helper.
childrenReact.ReactNode—Content to render inside the figure.
...All standard HTML attributes and Bulma helper props—See Helper Props

Subcomponents:

  • Figure.Caption: FigureCaption component for rendering a styled figcaption element. A FigureCaption wraps the HTML <figcaption> element with Bulma helper class integration. Use it inside Figure components to provide captions for images or other media.

Figure.Caption​

PropTypeDefaultDescription
classNamestring—Additional CSS classes to apply.
textColorBulma color | 'inherit' | 'current'—Text color (Bulma color, 'inherit', or 'current').
bgColorBulma color | 'inherit' | 'current'—Background color (Bulma color, 'inherit', or 'current').
childrenReact.ReactNode—Content to be rendered inside the figcaption.
...All standard HTML attributes and Bulma helper props—See Helper Props