Jump to main content

Figure & Figcaption

File location: sass/layout/helpers/_utilities.scss (GitHub)

The figure tag is a HTML wrapper used for graphics such as maps, charts, images, etc. It's typically used semantically in the context of an <article>. The element itself is unstyled in hgrid, except for a bottom margin (the same as a regular text paragraph).

The figcaption element is optional. It's used to hold a text description for the graphic element and has the same text style as a regular paragraph. You can add <small> if you wish to reduce the font size.


<figure class="width-80pct">
  <img src="/assets/img/global-happiness.png" alt="Global Happiness Index Map 2021">
    <small>Some explanatory text about the ...</small>

*) For clarity, we left out the responsive hgrid containers our example is wrapped in.


Global Happiness Index Map 2021 by Visual Capitalist
Some explanatory text about the happiness map, wrapped in a figcaption element.

Previous: Visibility

Next: Input