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:

Case Study containing an image

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

Standard options

This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the component wrapper helper documentation for more detail.

id - accepts a string for the element ID attribute
data_attributes - accepts a hash of data attributes
aria - accepts a hash of aria attributes
classes - accepts a space separated string of classes, these should not be used for styling and must be prefixed with js-
margin_bottom - accepts a number from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale
role - accepts a space separated string of roles
lang - accepts a language attribute value
open - accepts an open attribute value (true or false)
hidden - accepts an empty string, ‘hidden’, or ‘until-found’
tabindex - accepts an integer. The integer can also be passed as a string
dir - accepts ‘rtl’, ‘ltr’, or ‘auto’
type - accepts any valid type attribute e.g. ‘button’, ‘submit’, ‘text’
rel - accepts any valid rel attribute e.g. ‘nofollow’
target - accepts a valid target attribute e.g. ‘_blank’
title - accepts any string
draggable - accepts a draggable attribute value (“true” or “false”)

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