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.

Prop	Description	Type	Default	Required
size	Sizes - supports any size token	number \| "100" \| "125" \| "150" \| "175" \| "200" \| "225" \| "250" \| "275" \| "300" \| "350" \| "400" \| "450" \| "500" \| "075" \| "087" \| "025" \| "050" \| ({ "@sm"?: number \| "100" \| "125" \| "150" \| ... 13 more ... \| "050"; ... 23 more ...; "@initial"?: number \| ... 16 more ... \| "050"; } & { ...; }) \| SizeToken	200	False
asChild		boolean	----	False
css	WPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.	{} & { alignContent?: AlignContent \| Globals \| ScaleValue \| Index; alignItems?: AlignItems \| Globals \| ScaleValue \| Index; ... 426 more ...; vectorEffect?: VectorEffect \| ... 2 more ... \| Index; } & ... 7 more ... & { ...; }	----	False