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:

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

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)

<%= 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)

<%= 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)

<%= 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)

<%= 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)

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"
} %>