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.

Example:^*

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

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

Result:

← Previous: Visibility

Next: Input →