Figure & Figcaption
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).
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"> <figcaption> <small>Some explanatory text about the ...</small> </figcaption> </figure>
*) For clarity, we left out the responsive hgrid containers our example is wrapped in.
← Previous: Visibility
Next: Input →