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
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
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?: AlignContent | Globals | ScaleValue | Index; alignItems?: AlignItems | Globals | ScaleValue | Index; ... 426 more ...; vectorEffect?: VectorEffect | ... 2 more ... | Index; } & ... 7 more ... & { ...; }
----False
Edit this page on GitHub.