Figure

The figure component provides a way to lay out a self-contained unit of content, like an image or video, usually on a text-heavy page.

Default figure

By default, figures appear in the flow of the page. In most cases, you'll want to use a figure element along with a figcaption, but this is completely optional as the semantics of these elements may not be appropriate in all contexts. Check out the Advanced examples section for more information.

If the figure contains an image, don't forget to give the img element an alt text. This is especially important if the figure doesn't have a caption or if the caption doesn't describe the image sufficently. Note that the alt text must not be the same as the caption.

Note that, according to the HTML5 specification, figure cannot be used inside p, h1, h2, etc. and figcaption must be the first or last direct child of figure (last in our case).

cute kitten — Figure with small image and caption

Cras pretium et elit id bibendum. Duis dapibus condimentum justo, aliquet porta justo vehicula quis. Pellentesque vulputate mattis lacus quis elementum. Vivamus vitae lobortis orci. Praesent interdum et elit non dignissim. Morbi sit amet nibh vitae tortor ullamcorper.

fluffy kitten — Figure with large image and caption

<p>By default, figures appear in the flow of the page. In most cases, you'll want to use a <code>figure</code> element along with a <code>figcaption</code>, but this is completely optional as the semantics of these elements may not be appropriate in all contexts. Check out the <a href="#advanced-examples">Advanced examples</a> section for more information.
</p>
<p>If the figure contains an image, don't forget to give the <code>img</code> element an alt text. This is especially important if the figure doesn't have a caption or if the caption doesn't describe the image sufficently. Note that the alt text must not be the same as the caption.
</p>
<p class="notice notice--info">Note that, according to the <strong>HTML5 specification</strong>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure"><code>figure</code></a> cannot be used inside <code>p</code>, <code>h1</code>, <code>h2</code>, etc. and <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption"><code>figcaption</code></a> must be the first or last direct child of <code>figure</code> (last in our case).
</p>
<figure class="figure figure--min">
  <img alt="cute kitten" class="figure__content" src="http://placekitten.com/g/400/200" /><figcaption class="figure__caption">Figure with small image and caption</figcaption>
</figure>
<p>
  Cras pretium et elit id bibendum. Duis dapibus condimentum justo, aliquet porta justo vehicula quis. Pellentesque vulputate mattis lacus quis elementum. Vivamus vitae lobortis orci. Praesent interdum et elit non dignissim. Morbi sit amet nibh vitae tortor ullamcorper.
</p>
<figure class="figure figure--min">
  <img alt="fluffy kitten" class="figure__content" src="http://placekitten.com/g/800/300" /><figcaption class="figure__caption">Figure with large image and caption</figcaption>
</figure>
<p>
  Cras pretium et elit id bibendum. Duis dapibus condimentum justo, aliquet porta justo vehicula quis. Pellentesque vulputate mattis lacus quis elementum. Vivamus vitae lobortis orci. Praesent interdum et elit non dignissim. Morbi sit amet nibh vitae tortor ullamcorper.
</p>
<figure class="figure figure--min figure--spaced">
  <img alt="cute kitten" class="figure__content" src="http://placekitten.com/g/700/300" /><figcaption class="figure__caption">More space above and below with class <code>figure--spaced</code></figcaption>
</figure>
<p>
  Cras pretium et elit id bibendum. Duis dapibus condimentum justo, aliquet porta justo vehicula quis. Pellentesque vulputate mattis lacus quis elementum. Vivamus vitae lobortis orci. Praesent interdum et elit non dignissim. Morbi sit amet nibh vitae tortor ullamcorper.
</p>
<figure class="figure figure--min figure--wide">
  <img alt="cute kitten" class="figure__content" src="http://placekitten.com/g/900/300" /><figcaption class="figure__caption">Wider than text with class <code>figure--wide</code></figcaption>
</figure>

Inset figure

For inset figures to be layed out properly, they must be used inside a container with a maximum width of 700px (43.75rem)—typically <div class="with-figure">. Add class clearfix to that container if you don't want the figures to overflow into the content that follows. Note that inset figures are neither self-cleared nor restricted in height.

Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at, dapibus mauris. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan. Donec pretium, leo tempor adipiscing posuere, risus ligula ornare erat, vitae euismod lectus nulla ac arcu. Morbi sed pharetra risus, nec auctor lorem. Phasellus neque quam, auctor ut tincidunt et, suscipit quis nibh. Praesent sed malesuada eros, eu volutpat tortor. Proin pharetra nisl sed eros ultrices, vitae condimentum felis tempor.

Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Donec pretium, leo tempor adipiscing posuere, risus ligula ornare erat, vitae euismod lectus nulla ac arcu. Morbi sed pharetra risus, nec auctor lorem. Phasellus neque quam, auctor ut tincidunt et, suscipit quis nibh. Praesent sed malesuada eros, eu volutpat tortor. Proin pharetra nisl sed eros ultrices, vitae condimentum felis tempor nulla ac arcu.

<p>For inset figures to be layed out properly, they must be used inside a container with a maximum width of 700px (43.75rem)—typically <code><div class="with-figure"></code>. Add class <code>clearfix</code> to that container if you don't want the figures to overflow into the content that follows. Note that inset figures are neither self-cleared nor restricted in height.
</p>
<div class="with-figure clearfix">
  <figure class="figure figure--left figure--min">
    <img alt="cute kitten" class="figure__content" src="http://placekitten.com/g/600/300" /><figcaption class="figure__caption">Figure inset to the left</figcaption>
  </figure>
  <p>
    Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at, dapibus mauris. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan. Donec pretium, leo tempor adipiscing posuere, risus ligula ornare erat, vitae euismod lectus nulla ac arcu. Morbi sed pharetra risus, nec auctor lorem. Phasellus neque quam, auctor ut tincidunt et, suscipit quis nibh. Praesent sed malesuada eros, eu volutpat tortor. Proin pharetra nisl sed eros ultrices, vitae condimentum felis tempor.
  </p>
  <figure class="figure figure--right figure--min">
    <img alt="fluffy kitten" class="figure__content" src="http://placekitten.com/g/600/700" /><figcaption class="figure__caption">Tall figure inset to the right</figcaption>
  </figure>
  <p>
    Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Donec pretium, leo tempor adipiscing posuere, risus ligula ornare erat, vitae euismod lectus nulla ac arcu. Morbi sed pharetra risus, nec auctor lorem. Phasellus neque quam, auctor ut tincidunt et, suscipit quis nibh. Praesent sed malesuada eros, eu volutpat tortor. Proin pharetra nisl sed eros ultrices, vitae condimentum felis tempor nulla ac arcu.
  </p>
  <figure class="figure figure--left figure--min">
    <img alt="cute kitten" class="figure__content" src="http://placekitten.com/g/200/320" /><figcaption class="figure__caption">With narrow image</figcaption>
  </figure>
  <p>
    Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at, dapibus mauris. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan. Donec pretium, leo tempor adipiscing posuere, risus ligula ornare erat, vitae euismod lectus nulla ac arcu. Morbi sed pharetra risus, nec auctor lorem. Phasellus neque quam, auctor ut tincidunt et, suscipit quis nibh. Praesent sed malesuada eros, eu volutpat tortor.
  </p>
  <figure class="figure figure--right figure--min">
    <img alt="fluffy kitten" class="figure__content" src="http://placekitten.com/g/200/200" /><figcaption class="figure__caption">With narrow image and very, very, very long caption</figcaption>
  </figure>
  <p>
    Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at, dapibus mauris. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan. Donec pretium, leo tempor adipiscing posuere, risus ligula ornare erat, vitae euismod lectus nulla ac arcu. Morbi sed pharetra risus, nec auctor lorem. Phasellus neque quam, auctor ut tincidunt et, suscipit quis nibh. Praesent sed malesuada eros, eu volutpat tortor. Proin pharetra nisl sed eros ultrices, vitae condimentum felis tempor. Eu volutpat tortor. Morbi sed pharetra risus proin pharetra nisl sed eros ultrices, nunc vel condimentum mi vitae condimentum felis tempor lectus nulla ac arcu.
  </p>
</div>

Confined inset figure

By default, as demonstrated in the previous section, inset figures are offset to the left or right of the text by various amounts based on the available screen space and the presence of the in-page navigation. You can disable this behaviour and keep a figure aligned with the text at all times with class figure--confined. This is useful inside modals, for instance.

<p>By default, as demonstrated in the previous section, inset figures are offset to the left or right of the text by various amounts based on the available screen space and the presence of the <a href="/components/inpage-navigation">in-page navigation</a>. You can disable this behaviour and keep a figure aligned with the text at all times with class <code>figure--confined</code>. This is useful <a href="/components/modal#inset-within-modal">inside modals</a>, for instance.
</p>
<div class="with-figure clearfix">
  <figure class="figure figure--left figure--min figure--confined">
    <img alt="cute kitten" class="figure__content" src="http://placekitten.com/g/600/400" /><figcaption class="figure__caption">With <code>figure--confined</code></figcaption>
  </figure>
  <p>
    Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at, dapibus mauris. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan.
  </p>
  <figure class="figure figure--right figure--min figure--confined">
    <img alt="cute kitten" class="figure__content" src="http://placekitten.com/g/200/200" /><figcaption class="figure__caption">With <code>figure--confined</code> and a very long caption</figcaption>
  </figure>
  <p>
    Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at, dapibus mauris. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan. Maecenas pulvinar velit magna.
  </p>
</div>

Other content types

The use of the figure component is not limited to images. Some examples are shown below. Check out the embed component for examples involving third-party embeds, like YouTube videos

Note that figures with SVG elements are buggy in IE. No workaround is in place at this time.

Figure with video element

Preference	Offer made
1	Yes
2	No
3	Yes

Figure with table element

Figure with responsive svg element

Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at.

Figure with audio element

Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros.

Inset figure with non-responsive svg element

Preference	Offer made
1	Yes
2	No
3	Yes

Inset table with figure--max

Inset figure with video

<p>
  The use of the figure component is not limited to images. Some examples are shown below. Check out the <a href="/components/embed">embed component</a> for examples involving third-party embeds, like YouTube videos
</p>
<p class="notice notice--info">
  Note that figures with SVG elements are <a href="https://css-tricks.com/scale-svg/">buggy in IE</a>. No workaround is in place at this time.
</p>
<figure class="figure figure--max">
  <video class="figure__content" controls="" height="394" width="700">
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" /><source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" /><source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
  </video>
  <figcaption class="figure__caption">Figure with <code>video</code> element</figcaption>
</figure>
<figure class="figure figure--max">
  <table class="figure__content zebra">
    <thead>
      <tr>
        <th scope="col">
          Preference
        </th>
        <th scope="col">
          Offer made
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          1
        </td>
        <td>
          Yes
        </td>
      </tr>
      <tr>
        <td>
          2
        </td>
        <td>
          No
        </td>
      </tr>
      <tr>
        <td>
          3
        </td>
        <td>
          Yes
        </td>
      </tr>
    </tbody>
  </table>
  <figcaption class="figure__caption">Figure with <code>table</code> element</figcaption>
</figure>
<figure class="figure figure--max">
  <svg class="figure__content" height="50" viewBox="0 0 40 5" width="400"><title>Disc</title><rect fill="#ADB8C1" height="5" rx="2" ry="2" width="40" x="0" y="0" /></svg><figcaption class="figure__caption">Figure with responsive <code>svg</code> element</figcaption>
</figure>
<div class="with-figure clearfix">
  <p>
    Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at.
  </p>
  <figure class="figure figure--left figure--min">
    <audio class="figure__content" controls="" style="width: 20rem;">
      <source src="http://www.thewormlab.com/MiaowMusic/mp3/Miaow-snip-Stirring of a fool.mp3" type="audio/mpeg" /><source src="http://www.thewormlab.com/MiaowMusic/ogg/Miaow-snip-Stirring of a fool.ogg" type="audio/ogg" />
    </audio>
    <figcaption class="figure__caption">Figure with <code>audio</code> element</figcaption>
  </figure>
  <p>
    Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros.
  </p>
  <figure class="figure figure--right figure--min">
    <svg class="figure__content" height="100" viewBox="0 0 10 5" width="200"><title>Disc</title><rect fill="#ADB8C1" height="5" rx="2" ry="2" width="10" x="0" y="0" /></svg><figcaption class="figure__caption">Inset figure with non-responsive <code>svg</code> element</figcaption>
  </figure>
  <p>
    Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at, dapibus mauris. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan. Nullam iaculis orci quis ipsum accumsan pharetra.
  </p>
  <figure class="figure figure--left figure--max">
    <table class="figure__content zebra">
      <thead>
        <tr>
          <th scope="col">
            Preference
          </th>
          <th scope="col">
            Offer made
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            1
          </td>
          <td>
            Yes
          </td>
        </tr>
        <tr>
          <td>
            2
          </td>
          <td>
            No
          </td>
        </tr>
        <tr>
          <td>
            3
          </td>
          <td>
            Yes
          </td>
        </tr>
      </tbody>
    </table>
    <figcaption class="figure__caption">Inset table with <code>figure--max</code></figcaption>
  </figure>
  <p>
    Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at, dapibus mauris. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan. Nunc vel condimentum mi. Nullam gravida nec ante mattis accumsan. Nunc vel condimentum mi.
  </p>
  <figure class="figure figure--right figure--max">
    <video class="figure__content" controls="" height="394" width="700">
      <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" /><source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" /><source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
    </video>
    <figcaption class="figure__caption">Inset figure with video</figcaption>
  </figure>
  <p>
    Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at, dapibus mauris. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan. Donec pretium, leo tempor adipiscing posuere, risus ligula ornare erat, vitae euismod lectus nulla ac arcu. Morbi sed pharetra risus, nec auctor lorem. Phasellus neque quam, auctor ut tincidunt et, suscipit quis nibh. Praesent sed malesuada eros, eu volutpat tortor. Proin pharetra nisl sed eros ultrices, vitae condimentum felis tempor.
  </p>
</div>

Min vs max

In the examples above, you may have noticed the presence of two variant classes: figure--min and figure--max. Their role is to control the sizing behaviour of each figure. You must always use one or the other.

`figure--min`: Let the figure shrink to fit its content

Typically for images and non-responsive SVG elements. The previous section also shows an example with an audio player. The class notably deals with the case where an inset figure's content is narrower than its caption (cf. figure below).

`figure--max`: Let the figure expand to its maximum width

Typically for embeds, videos, responsive SVG elements, tables, etc.

<p>In the examples above, you may have noticed the presence of two variant classes: <code>figure--min</code> and <code>figure--max</code>. Their role is to control the sizing behaviour of each figure. You must always use one or the other.
</p>
<h3><code>figure--min</code>: Let the figure shrink to fit its content
</h3>
<p>
  Typically for <strong>images</strong> and non-responsive SVG elements. The previous section also shows an example with an audio player. The class notably deals with the case where an inset figure's content is narrower than its caption (cf. figure below).
</p>
<h3><code>figure--max</code>: Let the figure expand to its maximum width
</h3>
<p>
  Typically for <strong>embeds</strong>, videos, responsive SVG elements, tables, etc.
</p>
<div class="with-figure clearfix">
  <figure class="figure figure--right">
    <img alt="cute kitten" class="figure__content" src="http://placekitten.com/g/200/150" /><figcaption class="figure__caption">Without class <code>figure--min</code>, the figure expands to fit its caption</figcaption>
  </figure>
  <p>
    Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at, dapibus mauris. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan. Donec pretium, leo tempor adipiscing posuere, risus ligula ornare erat, vitae euismod lectus nulla ac arcu. Morbi sed pharetra risus, nec auctor lorem. Phasellus neque quam, auctor ut tincidunt et, suscipit quis nibh. Praesent sed malesuada eros, eu volutpat tortor. Proin pharetra nisl sed eros ultrices, vitae condimentum felis tempor. Proin pharetra nisl sed eros ultrices, vitae condimentum felis tempor.
  </p>
</div>

Advanced examples

The figure component is designed to be versatile: the caption is in no way mandatory, and the figure element can be replaced with a simple div. This section demonstrates these two aspects for both default and inset figures, and for various content types.

<p>The figure component is designed to be versatile: the caption is in no way mandatory, and the <code>figure</code> element can be replaced with a simple <code>div</code>. This section demonstrates these two aspects for both default and inset figures, and for various content types.
</p>
<div class="with-figure clearfix">
  <figure class="figure figure--min">
    <img alt="cute kitten" class="figure__content" src="http://placekitten.com/g/400/200" />
  </figure>
  <div class="figure figure--min">
    <img alt="fluffy kitten" class="figure__content" src="http://placekitten.com/g/700/200" />
  </div>
  <figure class="figure figure--left figure--min">
    <img alt="cute kitten" class="figure__content" src="http://placekitten.com/g/700/300" />
  </figure>
  <p>
    Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at, dapibus mauris. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan.
  </p>
  <div class="figure figure--right figure--min">
    <img alt="fluffy kitten" class="figure__content" src="http://placekitten.com/g/300/200" />
  </div>
  <p>
    Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at, dapibus mauris. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi.
  </p>
  <div class="figure figure--left figure--max figure--confined">
    <video class="figure__content" controls="" height="394" width="700">
      <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" /><source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" /><source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
    </video>
  </div>
  <p>
    Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at, dapibus mauris.
  </p>
  <div class="figure figure--right figure--min figure--confined">
    <svg class="figure__content" height="100" viewBox="0 0 10 10" width="100"><title>Disc</title><rect fill="#ADB8C1" height="10" rx="2" ry="2" width="10" x="0" y="0" /></svg>
  </div>
  <p>
    Maecenas pulvinar velit magna, nec scelerisque mauris fringilla suscipit. Pellentesque ut vehicula justo. Sed non rhoncus libero, ut iaculis eros. Aenean at sapien ultrices, vulputate erat at, dapibus mauris. Nullam iaculis orci quis ipsum accumsan pharetra. Nunc vel condimentum mi. Integer rhoncus ante quis lectus facilisis, ac auctor enim mattis. Nullam gravida nec ante mattis accumsan. Aenean at sapien ultrices.
  </p>
</div>