Avatar
An avatar is an image that represents a person. At The Washington Post we present avatars as circular photographs which represent individual contributors such as reporters and columnists.
Anatomy
Legend
- Image container
Options
Sizes
There are three sizes available for the avatar small medium & large.
Group sizing
medium & small avatars may be grouped. When the number of avatars exceeds three, the remaining ones may be truncated and hidden from view.
The truncated avatars are represented by a plus sign followed by the quantity.
Show All
When avatars are in a group, the option to show all can be toggled to reveal all avatars in a group.
Usage guidelines
Improper aspect ratio
The image in the avatar needs a 1:1 aspect ratio to round out properly. When using the wrong aspect ratio, the avatar shape comes out wrong.
Must be a single profile
The avatar should not be used to display a photo that has more than one subject.
Specs
Size
- Extra Large - 180px
- Large - 92px
- Medium - 56px
- Small - 32px
Size
Spacing between group avatars depends on the size of the group.
Medium avatars: 8px & Small avatars: 4px
Component Checklist
Visual information required to identify components and states (except inactive components) has a contrast ratio to meet WCAG 2.0 level AA. This exclude text contrast requirements. Unless disabled text should always be accessbile.
Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Sizing, spacing, and other visual styles have been outline in documentation and the coded component has been VQA to match
Considerations have been made to think in darkmode, lightmode, button themes and other applicable themes
Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)
Includes guidelines for keyboard focus, layout (wrapping, truncation, overflow), animation, interactions, etc.
A equivalent design component as been created matching as best as possible to properties found in the coded component.
Component can scale for all platforms mobile, tablet, and desktop.
Component has an opinion on how it scales on Homepage columns and other modular layouts.
Component can be used in iOS and Andriod or has an equivalent app component
Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.
All design attributes (color, typography, layout, animation, etc.) are available as design tokens.
Meets minimum requirements to ensure minimal impact to Web vitals. (Skeleton loads, Animations, Avoid layout shift, etc.)