Skip to content
Introducing StyloftCSS 0.1 / A small foundation for your next big idea. Meet the framework
Components/Avatars & groups
Media

Avatars & groups

Avatars & groups patterns built with StyloftCSS and native HTML.

CSS only2 examplesKeyboard friendly HTML

Avatar

Initials, sizes and an availability indicator with an accessible name.

Live preview
AVMCAM
View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-cluster sl-gap-4">
  <span class="sl-person sl-person--sm" role="img" aria-label="Ashish Verma">AV</span
  ><span class="sl-avatar-status"
    ><span class="sl-person" role="img" aria-label="Maya Chen, available"
      >MC</span
    ></span
  ><span class="sl-person sl-person--lg" role="img" aria-label="Alex Morgan">AM</span>
</div>
HTML source · enable JavaScript for the playground8 lines · UTF-8

AvatarGroup

Overlapping avatar presentation. Names and counts remain available to assistive technology.

Live preview
AVMCAM+3
View HTML / PlaygroundHTML source
example.htmlHTML
<div class="sl-avatar-group" aria-label="Example team">
  <span class="sl-person" role="img" aria-label="Ashish Verma">AV</span
  ><span class="sl-person" role="img" aria-label="Maya Chen">MC</span
  ><span class="sl-person" role="img" aria-label="Alex Morgan">AM</span
  ><span class="sl-person" role="img" aria-label="Three more team members">+3</span>
</div>
HTML source · enable JavaScript for the playground6 lines · UTF-8

Classes beginning with sl- come from StyloftCSS. Examples with demo- classes also use our optional demo extension CSS ↓. Load it after the core to reproduce those details.