1. Government Frontend Component Guide
  2. Figure

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

An image of 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"
} %>

Figure with caption (preview)

An image of the lords chamber

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)

تأشيرات

تأشيرات

<%= render "components/figure", {
  src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/image_data/file/31637/s300_Visas_-_Website.jpg",
  alt: "تأشيرات",
  caption: "تأشيرات"
} %>