Formatting
Aspect Ratio
You can choose from the following image ratios in accordance with the responsive grid:
- 32:9
- 16:9
- 3:2
- 4:3
- 1:1
- 3:4
- 2:3.
Modifiers
Captions
An image can optionally include a caption to provide additional context. This caption should use Label/Small/Regular.
Border
A 1px inside border can be added to the Image component to frame images. This is useful when the page background and image background are the same or similar colors. For image border color, use outline-variant.
Border radius
You can add a 32px border radius to the image component as a visual element.
Content guidance
The image is a foundational component and does not contain any additional content. Image with caption provides space for additional content, as shown in this table.
Element | Content type | Recommended character limit |
|---|---|---|
Caption (optional) | Text | 40 |
Media | Image | – |
Accessibility
Alt tags
- If the image does not provide information essential to understanding the content, use an empty alternative (alt="").
- If the image provides information essential to understanding the content, fill in the alternative with the necessary information (alt="@alternative").
There are several types of images categorized by how to provide appropriate text alternatives. Images must have text alternatives that describe the information or function represented by them in order to be accessible to those with disabilities.
Use the Web Content Acessibility Guidelines Alt Decision Tree to decide how to use the alt attribute of the <img> element in various situations.