WPDS Documentation & Resources

Avatar

Avatar is a round container that holds a profile image to be used.

Bundle size: 2.03 kB

Install:

npm install @washingtonpost/wpds-ui-kit|Copy

Usage:

import { Avatar } from "@washingtonpost/wpds-ui-kit"|Copy

Anatomy

Note: Image is not to scale

Avatar supports any size token. The default size token is 200.


Open in Playroom

Images set to the height and clipped in a round container. When images are not in a 1:1 aspect they will be distorted.


Open in Playroom

When inline, Avatars should maintain at least the recommended spacing

Avatars should always include alt text of the image.