Avatars are user profile images across the application.
There are four different sizes of the avatar:
- Small: Used on comments and replies
- Medium: Used on Activity feed and Notifications page
- Large: Used in testimonials
- Largest: Used for Meet the Educator at the bottom of the Welcome area. This is the same size as large on smalls screens, but doubles in size on screens larger than the
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
The avatars used in the comments area appear on a lighter grey background. We achieve this with the
a-avatar-alt modifier class.
Small avatar is used on comments & replies. It is 32 x 32 px in size, and includes the speech-bubble overlay.
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.
Medium avatar is used on the Activity Feed and the Notifications page. It is 44 x 44 px in size.
Large avatar is used testimonials. It is 64 x 64 px in size.
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 placeholders are used to indicate that an avatar can be shown in the reserved space.
A group of avatars makes a roster.