Component

Figure

A figure containing an image and optional caption.

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 "govuk_publishing_components/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 "govuk_publishing_components/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)

The image will fill the available space but not exceed the width of the container or its own width. The caption will always be the same width as the image.

<%= render "govuk_publishing_components/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 on the 14th of August. A large number of people are in attendance, filling the seats in the lower and upper areas. Several people are wearing hats."
} %>

Right to left with caption (preview)

<%= render "govuk_publishing_components/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 "govuk_publishing_components/components/figure", {
  src: "https://assets.publishing.service.gov.uk/government/uploads/system/uploads/feature/image/54374/s630_the_lords_chamber.jpg",
  credit: "Roger Harris"
} %>

Figure with caption and credit (preview)

The Lords Chamber on the 14th of August. A large number of people are in attendance, filling the seats in the lower and upper areas. Several people are wearing hats.

Image credit: Roger Harris

<%= render "govuk_publishing_components/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 on the 14th of August. A large number of people are in attendance, filling the seats in the lower and upper areas. Several people are wearing hats.",
  credit: "Roger Harris"
} %>