Design system

Avatar

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
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

PropDescriptionTypeDefaultRequired
sizeSizes - supports any size token
enum
number | 200
 200 False
Edit this page on GitHub.