Mirage: BGA styles

2.3.4 base.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

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

Figure 1

Markup: base/grouping/grouping-figure.twig

<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{modifier_class}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>&gt;</span>
  An illustration, diagram, photo, code listing, etc.
<span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span>

<span class="hljs-tag">&lt;<span class="hljs-name">figure</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{modifier_class}}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span>&gt;</span>
  An illustration, diagram, photo, code listing, etc.
  <span class="hljs-tag">&lt;<span class="hljs-name">figcaption</span>&gt;</span>Figure 1<span class="hljs-tag">&lt;/<span class="hljs-name">figcaption</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span>
</span>

Source: base/grouping/_grouping.scss, line 148