WPDS - Avatar | Components

Avatar

Note: This component status is in draft and indicates the component is actively being worked on.

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

Bundle size: 1.25 kB

Install:

npm install @washingtonpost/wpds-avatar|Copy

Usage:

import { Avatar } from "@washingtonpost/wpds-avatar"|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.

Prop	Description	Type	Default	Required
size	Sizes - supports any size token	enum number \| 200	200	False