Skip main navigation
We use cookies to give you a better experience, if that’s ok you can close this message and carry on browsing. For more info read our cookies policy.
We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Pattern Library
Avatars

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 smallplus breakpoint.

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.

Small

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

FL
.a-avatar.a-avatar--small.a-avatar--bubble.a-avatar--alt
  .a-avatar__initials.a-avatar__initials--ultramarine FL

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.

FL
.a-avatar.a-avatar--small.a-avatar--bubble.a-avatar--bubble-flip.a-avatar--alt
  .a-avatar__initials.a-avatar__initials--violet FL

Medium

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

FL
.a-avatar.a-avatar--bubble
  .a-avatar__initials.a-avatar__initials--gold FL

Large

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

FL
.a-avatar.a-avatar--large.a-avatar--bubble
  .a-avatar__initials.a-avatar__initials--pink FL

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.

FL
.a-avatar.a-avatar--largest.a-avatar--bubble
  .a-avatar__initials.a-avatar__initials--coral FL

Placeholder

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

.a-avatar.a-avatar--placeholder.a-avatar--bubble

Roster

A group of avatars makes a roster.

FL
FL
FL
FL
FL
FL
FL
FL
.m-roster
  .m-roster__members
    .m-roster__member.a-avatar.a-avatar--bubble
      .a-avatar__initials.a-avatar__initials--yellow FL
    .m-roster__member.a-avatar.a-avatar--bubble
      .a-avatar__initials.a-avatar__initials--gold FL
    .m-roster__member.a-avatar.a-avatar--bubble
      .a-avatar__initials.a-avatar__initials--orange FL
    .m-roster__member.a-avatar.a-avatar--bubble
      .a-avatar__initials.a-avatar__initials--coral FL
    .m-roster__member.a-avatar.a-avatar--bubble
      .a-avatar__initials.a-avatar__initials--pink FL
    .m-roster__member.a-avatar.a-avatar--bubble
      .a-avatar__initials.a-avatar__initials--violet FL
    .m-roster__member.a-avatar.a-avatar--bubble
      .a-avatar__initials.a-avatar__initials--purple FL
    .m-roster__member.a-avatar.a-avatar--bubble
      .a-avatar__initials.a-avatar__initials--ultramarine FL
    .m-roster__member.a-avatar.a-avatar--bubble.a-avatar--placeholder
    .m-roster__member.a-avatar.a-avatar--bubble.a-avatar--placeholder
    .m-roster__member.a-avatar.a-avatar--bubble.a-avatar--placeholder
    .m-roster__member.a-avatar.a-avatar--bubble.a-avatar--placeholder
  .m-roster__footer
    %a.link-primary{href: '#'} View members