1.4.3 atoms.grouping.figure Figures
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
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