Skip to main content


Use an image to add photographic or illustrative content to a page. The image component is an enhancement of the HTML image element.


A girl watching fish in a fish tank
Image component with a default theme

Best practices

Use an image to break up text-heavy pages, to illustrate products for sale, or to improve storytelling on a page. The use of an image should always support the page’s story and, when possible, contribute to that story.
Size the image to complement the rest of the page content.
Use a picture element to employ a selection of image versions for different viewport sizes.


  • Use the Lifestyle and Product imagery guidance when choosing your images.
  • Avoid putting graphic text in images and use HTML text instead.


  • Do not ignore guidance for improper usage at the bottom of the Lifestyle and Product imagery pages.
  • Do not use as a substitute for Hero, Feature, or Product and Content placements.
  • Do not use an image if it reduces the effectiveness of the page.


Image select


  • The alt attribute is always required.
  • Use descriptive alt text that concisely describes what the picture conveys. Make sure you are communicating what the image is telling you visually. If the image is purely for visual decoration and does not convey any meaningful information (such as an icon to reinforce adjacent text) then you should set the alt attribute to an empty string: alt="".
  • Images with complex content (i.e. charts and graphs) may need an additional description for non-sighted users. For example, provide a link to a text description or describe the image in detail on the page itself.


  • Class: The image component used on its own is always assigned the class c-image. However, when the image component is the child of a picture element, it is the picture element that is assigned the class c-image and the child image component does not have an assigned class.

  • Round image: Add the functional class f-round to the image element to make the image round.

  • Inline image: Add the class x-visible-inline to the image element for an inline image. See CSS Utility Selectors for more details on display utility classes.

  • Use the f-pad-* classes to provide vertical or horizontal spacing to the image component. By default no vertical or horizontal spacing is preset. The table below shows possible options:

Class Padding
.f-pad-bottom-3x Provides 12px bottom-padding
.f-pad-top-3x Provides 12px top-padding
.f-pad-vertical-3x Provides 12px top and bottom padding
.f-pad-bottom-6x Provides 24px bottom-padding
.f-pad-top-6x Provides 24px top-padding
.f-pad-vertical-6x Provides 24px top and bottom padding
.f-pad-right-3x Provides 12px right-padding
.f-pad-left-3x Provides 12px left-padding
.f-pad-horizontal-3x Provides 12px left and right padding
.f-pad-right-6x Provides 24px right-padding
.f-pad-left-6x Provides 24px left-padding
.f-pad-horizontal-6x Provides 24px left and right padding


  • The recommended image aspect ratios are 16:9, 16:6 and 4:3, depending on where the image appears and the priority of the image.


  • Schema definition: The image schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Simple image

Placeholder with grey background and dimension watermark
<img class="c-image" src="" alt="Placeholder with grey background and dimension watermark">


Placeholder with grey background and dimension watermark
<picture class="c-image">
    <source srcset="" media="(min-width: 1779px)">
    <source srcset="" media="(min-width:1400px)">
    <source srcset="" media="(min-width:1084px)">
    <source srcset="" media="(min-width:768px)">
    <source srcset="" media="(min-width:540px)">
    <source srcset="" media="(min-width:0)">
    <img srcset="" src="" alt="Placeholder with grey background and dimension watermark">

Round image

Round placeholder with grey background and dimension watermark
<img class="c-image f-round" src="" alt="Round placeholder with grey background and dimension watermark">