Skip to main content
Design system

Avatar

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

Bundle size: 0
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

Table of Contents

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

Edit this page on GitHub.
CommunityXTwittergithubGithubyoutubeYoutube