1.4.3 atoms.grouping.figure Figures

Toggle example guides Toggle HTML markup

The <figure> element can be used to annotate illustrations, diagrams, photos, code listings, etc.

Optionally, a <figcaption> element inside the <figure> represents the caption of the figure.

Example
An illustration, diagram, photo, code listing, etc.

A generic square placeholder image.
A caption for the above image.

A generic square placeholder image.
A caption for the above image.
Markup: components/atoms/grouping/grouping-figure.twig
<figure class="">
  An illustration, diagram, photo, code listing, etc.
</figure>
<hr/>
<figure class="figure">
  <img src="http://placehold.it/350x150/" class="figure-img img-fluid" alt="A generic square placeholder image.">
  <figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
<hr/>
<figure class="figure">
  <img src="http://placehold.it/350x150" class="figure-img img-fluid" alt="A generic square placeholder image.">
  <figcaption class="figure-caption text-xs-right">A caption for the above image.</figcaption>
</figure>
Source: components/atoms/grouping/_grouping.scss, line 92