Sizes
Class Example
.mdst-avatar--sm User
.mdst-avatar User
.mdst-avatar--lg User
.mdst-avatar--xl User
Initials (no image)
Class Example
.mdst-avatar--sm AB
.mdst-avatar CD
.mdst-avatar--lg EF
.mdst-avatar--xl GH
Variants
Class Example
.mdst-avatar JK User
.mdst-avatar--square JK User
Avatar Group
Class Example
.mdst-avatar-group
User 1 User 2 User 3 User 4
.mdst-avatar-group (initials)
AB CD EF +3
Examples
Jane Doe Jane Doe
MU
Modest UI
Organization
User User User +5
Usage
<!-- Avatar with image -->
<span class="mdst-avatar">
  <img src="avatar.jpg" alt="User" />
</span>

<!-- Avatar with initials -->
<span class="mdst-avatar">AB</span>

<!-- Sizes -->
<span class="mdst-avatar mdst-avatar--sm">AB</span>
<span class="mdst-avatar mdst-avatar--lg">AB</span>
<span class="mdst-avatar mdst-avatar--xl">AB</span>

<!-- Square variant -->
<span class="mdst-avatar mdst-avatar--square">
  <img src="avatar.jpg" alt="User" />
</span>

<!-- Avatar group -->
<div class="mdst-avatar-group">
  <span class="mdst-avatar">
    <img src="user1.jpg" alt="User 1" />
  </span>
  <span class="mdst-avatar">
    <img src="user2.jpg" alt="User 2" />
  </span>
  <span class="mdst-avatar">+3</span>
</div>