Images

Capture the user’s attention and communicate your message

Default

Use for images with no responsive qualities.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Managing images

Apply rules to an image using ratio and crop properties. The below example is cropped using top alignment with the aspect ratio set as 9-16

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Displaying images as backgrounds

Use the cover property to resize the background image to fill the entire container.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Shaping images

Apply a radius to an image.

Rounded

The below example is cropped using center alignment with the aspect ratio set as square and the radius set as rounded.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Circle

The below example is cropped using center alignment with the aspect ratio set as square and the radius set as circle.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Accessibility

To ensure that usage of this component complies with accessibility guidelines, provide descriptive text for alt attribute for:


This component has compliance with WCAG guidelines by:

  • Adding an empty alt attribute into the image element by default
  • An empty alt attribute is needed to meet accessibility requirements for decorative images