Skip to main content

Image placeholder

An image placeholder shows an image in a specific aspect ratio.

Guidelines​

An image placeholder provides a space for the image before it is loaded, this is to avoid the page "jumping" when the image loads. It keeps the aspect ratio of the image. An aspect ratio is the proportional relationship between its width and its height. Informational photography and illustrations are used within these aspect ratios.

Variations​

Avatar​

There are two avatar image placeholders to choose between: Avatar/Circle and Avatar/Square corners. Avatars can represent users or brands. If a user does not have an image to represent themselves, the user's initials can be used on a solid background.

circle - and - square corner

Rounded corners​

There are five Rounded corner aspect ratios available for use: 1:1, 2:1, 4:3, 5:7 and 16:9. 

rounded corners

Straight corners​

There are five Straight corner aspect ratios available for use: 1:1, 2:1, 4:3, 5:7 and 16:9.

straight corners