Avatar

Width Open in a tab

The classes below, on plain markup, in their own document — so what you are looking at is core's stylesheet and nothing else.

The markup

<span class="aparte-avatar aparte-avatar--sm">AP</span>
<span class="aparte-avatar">JD</span>
<span class="aparte-avatar aparte-avatar--lg aparte-avatar--square">MK</span>
<span class="aparte-avatar-group">
  <span class="aparte-avatar">AP</span>
  <span class="aparte-avatar">JD</span>
  <span class="aparte-avatar">+3</span>
</span>

Sizes, shape, image + initials fallback

--aparte-avatar-size is NOT invented here: it already exists centrally for the message avatar (bubble.css), and this component reads the same one — a generic avatar and a chat-message avatar are the same object, and a size modifier applied here resizes a role-coloured message avatar too. The corner, the initials and the group’s overlap are FRACTIONS of that size (--aparte-avatar-radius-ratio, --aparte-avatar-initials-ratio, --aparte-avatar-overlap-ratio), computed on the element so a size modifier moves them: as absolute tokens the 40px avatar drew the same 11px initials as the 32px one, the corner drifted from squircle to square up the ramp, and a 6px overlap was a fifth of a small avatar and a tenth of a large one.

Classes

.aparte-avatar · .aparte-avatar--circle · .aparte-avatar--lg · .aparte-avatar--sm · .aparte-avatar--square · .aparte-avatar--xl · .aparte-avatar--xs · .aparte-avatar-group · .aparte-avatar__image

The tokens these read are on the CSS variables reference; every class of the kit, on one page, is the classes reference.