Avatar

Avatars display user profile pictures or initials.

Basic usage

<!-- Initials (informative) -->
<div class="af-avatar" aria-label="Alex Brown">
  AB
</div>
<div class="af-avatar af-avatar-sm" aria-label="Jordan Davis">
  JD
</div>
<div class="af-avatar af-avatar-lg" aria-label="Casey Drew">
  CD
</div>
<!-- Image -->
<div class="af-avatar">
  <img src="avatar.jpg" alt="Alex Brown" />
</div>

Sizes

• af-avatar-sm - Small avatar
• af-avatar - Default size
• af-avatar-lg - Large avatar

Live example

JD

AB

CD