Avatars

Purpose

Avatars are user profile images across the application.

Example

Avatar Small

Description

There are four different sizes of the avatar:

When they are used for comments and replies they are masked to apply a speech-bubble effect, using the modifier class a-avatar--bubble. The mask has two orientations depending whether the text is a comment or a reply: for replies, add the extra modifier class a-avatar--bubble-flip.

The avatars used in the comments area appear on a lighter grey background. We achieve this with the a-avatar-alt modifier class.

Variants

Small

Small avatar is used on comments & replies. It is 32 x 32 px in size, and includes the speech-bubble overlay.

Avatar Small

Avatars in replies

For replies, the speech bubble overlay is flipped to indicate the comment has come from another person and to suggest a conversation.

Avatar Small Reply

Medium

Medium avatar is used on the Activity Feed and the Notifications page. It is 44 x 44 px in size.

Avatar Medium

Large

Large avatar is used testimonials. It is 64 x 64 px in size.

Avatar Large

Largest

Largest avatar is the same size as Large, but it almost doubles in size when the viewport is larger than breakpoint smallplus. It is 64 x 64 px in size, and increases to 120px.

Avatar Largest

Placeholder

Avatar placeholders are used to indicate that an avatar can be shown in the reserved space.

Placeholder

Roster

A group of avatars makes a roster.

Roster

Added by: