Overview
Images add visual interest or describe content visually. All images, along with their descriptions, are responsive. Images may be full width in relation to the container or floated either left or right within body copy.
Usage guidelines
Accessibility
All images must have an Alt tag that clearly describes the image. Alt tags are used for screen readers or as a placeholder when images do not load properly. If there is text on the image or diagram, it must be legible and WCAG 2 compliant.
Size and positioning
Images fit into different types of components. Crop all images at the correct aspect ratio for its type and optimize for the web with no visible pixilation or distortion.
| Component | Aspect ratio | Minimum size (Pixels) |
|---|---|---|
| Cards | 16:9 | 750 x 422 |
| Hero banner | 16:9 | 1920 x 1080 |
| Full-width image | 16:9 | 750 x 422 |
| Right or left aligned image | 16:9 (horizontal) 2:3 (vertical) | 320 x 180 (horizontal) 240 x 360 (vertical) |
Content guidelines
Choose images relevant to the content of the page. All images must be professional and have high quality resolution.
When choosing an image check for:
- size and resolution requirements
- stylistic preference
- location specifications
- copyright laws
Add a caption
Go to the Captions page for further guidelines on writing captions.