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.
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.
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).
An image can be any width or height. The component will automatically reduce the image width if it is too wide.
The figure component is designed to be versatile. You can leave out the figcaption if you have no need for it.
Spaced figure
To add spacing above and below the figure, use figure--spaced.
Cras pretium et elit id bibendum. Duis dapibus condimentum justo, aliquet porta justo vehicula quis.
Cras pretium et elit id bibendum. Duis dapibus condimentum justo, aliquet porta justo vehicula quis.
Video figure
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
Table figure
| Preference | Offer made |
|---|---|
| 1 | Yes |
| 2 | No |
| 3 | Yes |
Inset figure
For inset embeds to be layed out properly, they must be used inside <div class="with-figure">...</div>.
Left aligned inset figure
Use figure--left to left align the figure.
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.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, minus mollitia. Doloribus fugiat, aut exercitationem inventore nisi consequatur beatae unde delectus obcaecati minus atque aspernatur aperiam suscipit ullam autem maiores. Quisquam, voluptatibus ullam magni consectetur perferendis obcaecati molestiae corporis, a repellendus nobis animi molestias rerum id nisi esse. Inventore dolorem explicabo officiis, iure sit rerum nisi modi veniam perspiciatis! Ipsam! Expedita libero ipsa, quae reprehenderit, hic saepe ratione odit ducimus fugiat odio exercitationem culpa, cumque tempora ipsum ea maiores dicta a in perferendis error cum voluptate dolore. Incidunt, commodi!
Right aligned inset figure
Use figure--right to left right the figure.
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.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, minus mollitia. Doloribus fugiat, aut exercitationem inventore nisi consequatur beatae unde delectus obcaecati minus atque aspernatur aperiam suscipit ullam autem maiores. Quisquam, voluptatibus ullam magni consectetur perferendis obcaecati molestiae corporis, a repellendus nobis animi molestias rerum id nisi esse. Inventore dolorem explicabo officiis, iure sit rerum nisi modi veniam perspiciatis! Ipsam! Expedita libero ipsa, quae reprehenderit, hic saepe ratione odit ducimus fugiat odio exercitationem culpa, cumque tempora ipsum ea maiores dicta a in perferendis error cum voluptate dolore. Incidunt, commodi!
Shrinking figure
Use figure--min to let the figure contents shrink to its normal width.
Expanding figure
Use figure--max to let the figure contents expand to its maximum width.
Epanding table
| Preference | Offer made |
|---|---|
| 1 | Yes |
| 2 | No |
| 3 | Yes |
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.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, minus mollitia. Doloribus fugiat, aut exercitationem inventore nisi consequatur beatae unde delectus obcaecati minus atque aspernatur aperiam suscipit ullam autem maiores. Quisquam, voluptatibus ullam magni consectetur perferendis obcaecati molestiae corporis, a repellendus nobis animi molestias rerum id nisi esse. Inventore dolorem explicabo officiis, iure sit rerum nisi modi veniam perspiciatis! Ipsam! Expedita libero ipsa, quae reprehenderit, hic saepe ratione odit ducimus fugiat odio exercitationem culpa, cumque tempora ipsum ea maiores dicta a in perferendis error cum voluptate dolore. Incidunt, commodi!
Div figures
The figure component is designed to also be used with a div.