Figure - Component

View full screen
Code

Source (Nunjucks)

<figure>
  <img alt="Dog holding a stick."  decoding="auto" height="240" src="https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/QlgeHQrzaD9IOKBXB68I.jpg?auto=format" width="380">
  <figcaption>This is the caption</figcaption>
</figure>

Output

<figure>
  <img
    alt="Dog holding a stick."
    decoding="auto"
    height="240"
    src="https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/QlgeHQrzaD9IOKBXB68I.jpg?auto=format"
    width="380"
  />
  <figcaption>This is the caption</figcaption>
</figure>

Information

In order to use an image inside of a text body, wrap the actual image in <figure> tag. Use <figcaption> to add a caption to the image.

<figure> elements wrap the content inside of them.

Variants

Float figure

View full screen
Code

Source (Nunjucks)

<div class="prose">
  <p> Euismod tellus phasellus sapien mus enim curabitur eu at fermentum luctus curae dis cras ut magnis libero eros eget non scelerisque potenti dui aenean porttitor hac integer consectetur penatibus commodo nunc proin tincidunt tempus adipiscing volutpat ipsum justo hendrerit ultrices sit pulvinar ad magna ridiculus class lobortis maecenas orci semper </p>
  <figure data-float="left">
    <img alt="Alternative text" height="480" sizes="100vw" src="https://web-dev.imgix.net/image/admin/ZAID4J5TsJTcJs3qPNTp.png">
    <figcaption>This figure floats left</figcaption>
  </figure>
  <p> Euismod tellus phasellus sapien mus enim curabitur eu at fermentum luctus curae dis cras ut magnis libero eros eget non scelerisque potenti dui aenean porttitor hac integer consectetur penatibus commodo nunc proin tincidunt tempus adipiscing volutpat ipsum justo hendrerit ultrices sit pulvinar ad magna ridiculus class lobortis maecenas orci semper </p>
  <p> Euismod tellus phasellus sapien mus enim curabitur eu at fermentum luctus curae dis cras ut magnis libero eros eget non scelerisque potenti dui aenean porttitor hac integer consectetur penatibus commodo nunc proin tincidunt tempus adipiscing volutpat ipsum justo hendrerit ultrices sit pulvinar ad magna ridiculus class lobortis maecenas orci semper </p>
  <figure data-float="right">
    <img alt="Alternative text" height="480" sizes="100vw" src="https://web-dev.imgix.net/image/admin/ZAID4J5TsJTcJs3qPNTp.png">
    <figcaption>This figure floats right</figcaption>
  </figure>
  <p> Euismod tellus phasellus sapien mus enim curabitur eu at fermentum luctus curae dis cras ut magnis libero eros eget non scelerisque potenti dui aenean porttitor hac integer consectetur penatibus commodo nunc proin tincidunt tempus adipiscing volutpat ipsum justo hendrerit ultrices sit pulvinar ad magna ridiculus class lobortis maecenas orci semper </p>
  <p> Euismod tellus phasellus sapien mus enim curabitur eu at fermentum luctus curae dis cras ut magnis libero eros eget non scelerisque potenti dui aenean porttitor hac integer consectetur penatibus commodo nunc proin tincidunt tempus adipiscing volutpat ipsum justo hendrerit ultrices sit pulvinar ad magna ridiculus class lobortis maecenas orci semper </p>
</div>

Output

<div class="prose">
  <p>
    Euismod tellus phasellus sapien mus enim curabitur eu at fermentum luctus
    curae dis cras ut magnis libero eros eget non scelerisque potenti dui aenean
    porttitor hac integer consectetur penatibus commodo nunc proin tincidunt
    tempus adipiscing volutpat ipsum justo hendrerit ultrices sit pulvinar ad
    magna ridiculus class lobortis maecenas orci semper
  </p>
  <figure data-float="left">
    <img
      alt="Alternative text"
      height="480"
      sizes="100vw"
      src="https://web-dev.imgix.net/image/admin/ZAID4J5TsJTcJs3qPNTp.png"
    />
    <figcaption>This figure floats left</figcaption>
  </figure>
  <p>
    Euismod tellus phasellus sapien mus enim curabitur eu at fermentum luctus
    curae dis cras ut magnis libero eros eget non scelerisque potenti dui aenean
    porttitor hac integer consectetur penatibus commodo nunc proin tincidunt
    tempus adipiscing volutpat ipsum justo hendrerit ultrices sit pulvinar ad
    magna ridiculus class lobortis maecenas orci semper
  </p>
  <p>
    Euismod tellus phasellus sapien mus enim curabitur eu at fermentum luctus
    curae dis cras ut magnis libero eros eget non scelerisque potenti dui aenean
    porttitor hac integer consectetur penatibus commodo nunc proin tincidunt
    tempus adipiscing volutpat ipsum justo hendrerit ultrices sit pulvinar ad
    magna ridiculus class lobortis maecenas orci semper
  </p>
  <figure data-float="right">
    <img
      alt="Alternative text"
      height="480"
      sizes="100vw"
      src="https://web-dev.imgix.net/image/admin/ZAID4J5TsJTcJs3qPNTp.png"
    />
    <figcaption>This figure floats right</figcaption>
  </figure>
  <p>
    Euismod tellus phasellus sapien mus enim curabitur eu at fermentum luctus
    curae dis cras ut magnis libero eros eget non scelerisque potenti dui aenean
    porttitor hac integer consectetur penatibus commodo nunc proin tincidunt
    tempus adipiscing volutpat ipsum justo hendrerit ultrices sit pulvinar ad
    magna ridiculus class lobortis maecenas orci semper
  </p>
  <p>
    Euismod tellus phasellus sapien mus enim curabitur eu at fermentum luctus
    curae dis cras ut magnis libero eros eget non scelerisque potenti dui aenean
    porttitor hac integer consectetur penatibus commodo nunc proin tincidunt
    tempus adipiscing volutpat ipsum justo hendrerit ultrices sit pulvinar ad
    magna ridiculus class lobortis maecenas orci semper
  </p>
</div>

Screenshot figure

View full screen
Code

Source (Nunjucks)

<div class="prose">
  <p>Add <code>data-screenshot</code> attribute to add a border around a figure.</p>
  <figure data-screenshot="true">
    <img alt="Dog holding a stick."  decoding="auto" height="240" src="https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/QlgeHQrzaD9IOKBXB68I.jpg?auto=format" width="380">
    <figcaption>This figure gets a border.</figcaption>
  </figure>
</div>

Output

<div class="prose">
  <p>
    Add <code>data-screenshot</code> attribute to add a border around a figure.
  </p>
  <figure data-screenshot="true">
    <img
      alt="Dog holding a stick."
      decoding="auto"
      height="240"
      src="https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/QlgeHQrzaD9IOKBXB68I.jpg?auto=format"
      width="380"
    />
    <figcaption>This figure gets a border.</figcaption>
  </figure>
</div>

Size figure

View full screen
Code

Source (Nunjucks)

<div class="prose">
  <p>In order for the <code>&lt;figure&gt;</code> to take up the full width of the element that it is in, add the attribute <code>data-size="full"</code>.</p>
  <p>Content inside of the <code>&lt;figure&gt;</code> will stretch to take up all the available space.</p>
  <figure data-size="full">
    <img alt="Dog holding a stick."  decoding="auto" height="240" src="https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/QlgeHQrzaD9IOKBXB68I.jpg?auto=format" width="380">
    <figcaption>This figure and it's content is taking up the full space it can.</figcaption>
  </figure>
</div>

Output

<div class="prose">
  <p>
    In order for the <code>&lt;figure&gt;</code> to take up the full width of
    the element that it is in, add the attribute <code>data-size="full"</code>.
  </p>
  <p>
    Content inside of the <code>&lt;figure&gt;</code> will stretch to take up
    all the available space.
  </p>
  <figure data-size="full">
    <img
      alt="Dog holding a stick."
      decoding="auto"
      height="240"
      src="https://web-dev.imgix.net/image/tcFciHGuF3MxnTr1y5ue01OGLBn2/QlgeHQrzaD9IOKBXB68I.jpg?auto=format"
      width="380"
    />
    <figcaption>
      This figure and it's content is taking up the full space it can.
    </figcaption>
  </figure>
</div>