Skip to content
search icon
clear
Component Status

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 themself, the user's initials can be used on a solid background.

FigmaExternal linkFigma design for avatar placeholder

Rounded corners

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

FigmaExternal linkFigma design sketches of 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.

FigmaExternal linkFigma design sketches for straight corners
✏️ Edit this page on GitHub