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.

Alan Gilbert building
Lorem ipsum dolor sit amet consectetur adipisicing elit.

The figure component is designed to be versatile. You can leave out the figcaption if you have no need for it.

Alan Gilbert building

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.

Alan Gilbert building
Lorem ipsum dolor sit amet consectetur adipisicing elit.

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

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Table figure

Preference Offer made
1 Yes
2 No
3 Yes
Lorem ipsum dolor sit amet consectetur adipisicing elit.

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.

Student sitting in a lecture theatre
Lorem ipsum dolor sit amet consectetur adipisicing elit.

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.

Lorem ipsum dolor sit amet consectetur adipisicing elit.

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.

Profile picture
Lorem ipsum dolor sit amet consectetur adipisicing elit.

Expanding figure

Use figure--max to let the figure contents expand to its maximum width.

Profile picture
Lorem ipsum dolor sit amet consectetur adipisicing elit.

Epanding table

Preference Offer made
1 Yes
2 No
3 Yes
Lorem ipsum dolor sit amet consectetur adipisicing elit.

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.

Alan Gilbert building