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.
Wide figure
Provided the image is wide enough, use figure--wide to widen the image.
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.
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.
Confined 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.
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.
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.
Div figures
The figure component is designed to also be used with a div.