When to use this component

Use the image component to present an image on a page.

How it works

In general, the figure component represents self-contained content and adds the benefit of providing an optional caption tag. A figure mostly is an image, but it also be other self-containted content such as an illustration, a diagram or a code snippet.

For images, the following requirements should be followed:

  • An alt attribute is required. A short text alternative should be specifid using the alt attribute. See WCAG Technique page
  • For images that are purely decorative images, the alt attributes must be empty.
  • An aspect ratio should always be provided. The default aspect ratio is 8:5.
  • When the image is loading or is not found, a placeholder image is used.

Usage within the style guide

The image component is used in the:

<figure {% if modifier %} class="{{ modifier }}" {% endif %}>
  {% include '@image' with {
    'src': figure_image_src,
    'alt_text': figure_image_alt_text,
    'ratio': figure_ratio
  } %}
  {% if figure_figcaption %}
    {% include '@figcaption' with {
      'figcaption': figure_figcaption
    } %}
  {% endif %}
    <div class="image-wrapper" data-ratio="8:5">
        <img src="" alt="Image alt text" />

    <figcaption>Figure caption comes here.</figcaption>
  "figure_figcaption": "Figure caption comes here.",
  "figure_image_src": "",
  "figure_image_alt_text": "Image alt text",
  "figure_ratio": "8:5"
  • Content:
    figure {
      img {
        display: block;
        width: 100%;
  • URL: /components/raw/figure/_figure.scss
  • Filesystem Path: components/31-molecules/figure/_figure.scss
  • Size: 60 Bytes