Component
Figure
A figure containing an image that never exceeds the component’s width
A figure should be used for images that are referenced within a page, but which can be moved around without affecting the flow of the page (see guidance here)
Examples:
How it looks (preview) (preview all)
![](https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/54374/s630_the_lords_chamber.jpg)
How to call this component
<%= render "components/figure", {
src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/54374/s630_the_lords_chamber.jpg"
} %>
Accessibility acceptance criteria
The figure must:
- provide an informative text description, as alt text or caption
Other examples
Figure with alt text (preview)
![An image of the lords chamber](https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/54374/s630_the_lords_chamber.jpg)
<%= render "components/figure", {
src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/54374/s630_the_lords_chamber.jpg",
alt: "An image of the lords chamber"
} %>
Figure with caption (preview)
![An image of the lords chamber](https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/54374/s630_the_lords_chamber.jpg)
The Lords Chamber
<%= render "components/figure", {
src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/54374/s630_the_lords_chamber.jpg",
alt: "An image of the lords chamber",
caption: "The Lords Chamber"
} %>
Right to left with caption (preview)
![تأشيرات](https://assets.publishing.service.gov.uk/government/uploads/system/uploads/image_data/file/31637/s300_Visas_-_Website.jpg)
تأشيرات
<%= render "components/figure", {
src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/image_data/file/31637/s300_Visas_-_Website.jpg",
alt: "تأشيرات",
caption: "تأشيرات"
} %>
Figure with credit (preview)
![](https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/54374/s630_the_lords_chamber.jpg)
Image credit: Wallis Crankled
<%= render "components/figure", {
src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/54374/s630_the_lords_chamber.jpg",
credit: "Wallis Crankled"
} %>
Figure with caption and credit (preview)
![](https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/54374/s630_the_lords_chamber.jpg)
The Lords Chamber
Image credit: Wallis Crankled
<%= render "components/figure", {
src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/54374/s630_the_lords_chamber.jpg",
caption: "The Lords Chamber",
credit: "Wallis Crankled"
} %>