Skip to main content
Design system

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
Storybook:  View on Storybook
Source:  View on Github

Anatomy

Note: Image is not to scale

  1. Image container

Options

Size

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


Guidance

Supports only 1:1 image ratios

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

When inline, Avatars should maintain at least the recommended spacing



Accessibility

Avatars should always include alt text of the image.


API Reference

Avatar

PropDescriptionTypeDefaultRequired
sizeSizes - supports any size token
enum
number | 025 | 050 | 075 | 087 | 100 | 125 | 150 | 175 | 200 | 225 | 250 | 275 | 300 | 350 | 400 | 450 | 500
200 False
asChild
enum
boolean
----False
cssWPDS 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?: Globals | ScaleValue | Index | AlignContent; alignItems?: Globals | ScaleValue | Index | AlignItems; ... 425 more ...; vectorEffect?: Globals | ... 2 more ... | VectorEffect; } & ... 7 more ... & { ...; }
----False