Figures

Zirconium styles the <figure> and <figcaption> elements by adding the .figure class on the <figure> element. These are mostly used for images, but they can also be used for other media content like video and audio controls.

Thinking about destiny — **Figure 1** This is a sample placeholder image

<figure class="figure">
    <img
        src="…"
        alt="Thinking about destiny"
        width="801"
        height="501"
        loading="lazy"
    >
    <figcaption><b>Figure 1</b> This is a sample placeholder image</figcaption>
</figure>

Figures can also hold videos.

Figure 1 This is how you create an HTML file in elementary OS

<figure class="figure">
    <video src="/zirconium/assets/media/html.webm" controls>
        <p>Your browser cannot play this file</p>
    </video>
    <figcaption>
        <p><b>Figure 1</b> This is how you create an HTML file in elementary OS</p>
    </figcaption>
</figure>

Quotations

The figure element can also contain blockquotes, while the figcaption inside them has the citation. Using blockquotes on its own is still valid, however. To use figures for blockquotes, add the class .quotation.

Oh. This is awkward. Your ex and your boyfriend together at the same party—who are you gonna choose, Wanda?

Agatha Harkness

<figure class="quotation">
    <blockquote>
    <p>
        Oh. This is awkward. Your ex and your boyfriend
        together at the same party—who are you gonna
        choose, Wanda?
    </p>
    </blockquote>
    <figcaption>
        <cite>Agatha Harkness</cite>
    </figcaption>
</figure>