Avatar | mCSS Documentation

File Name	class	Source
`component.avatar.css`	`.avatar`	Github

The .avatar component is a visual represention of a user. It shows the user’s initials or an image thumbnail.

Available modifiers	Description
`.avatar`	Default - 56px
`.avatar` + `.avatar-sm`	Small - 24px
`.avatar` + `.avatar-md`	Medium - 36px
`.avatar` + `.avatar-lg`	Large - 80px
`.avatar` + `.avatar-xl`	Extra large - 128px
`.avatar` + `.avatar-online`	User is online - green dot
`.avatar` + `.avatar-offline`	User is offline - grey dot

<div class="avatar">
  <div>
    <span>SR</span>
  </div>
</div>

Astro component syntax:

<Avatar>Sonny Rollins</Avatar>

The astro component can take initials or a full name and will output initials if an image is not provided. It will output the full name in the alt attribute if an image is provided.

<div class="avatar avatar-xl avatar-online">
  <div>
    <img src="/assets/images/sonny.png" alt="Sonny Rollins">
  </div>
</div>

Astro component syntax:

---
import Avatar from "../../components/Avatar.astro";
import pic from "../../assets/images/sonny.png";
---
<Avatar online size="xl" pic={pic}>Sonny Rollins</Avatar>

Components :: Avatar

Specs

Available styles

Examples