Avatar

Avatars are used to visually represent users, brands, or profiles. Quanta CSS offers semantic color support, multiple sizes, badges, and grouping.

Basic Usage

<span class="quanta-avatar quanta-avatar-md quanta-avatar-primary">A</span>

A

Sizes & Variants

<span class="quanta-avatar quanta-avatar-sm quanta-avatar-success">A</span>
<span class="quanta-avatar quanta-avatar-md quanta-avatar-warning">B</span>
<span class="quanta-avatar quanta-avatar-lg quanta-avatar-info">C</span>

A B C

Grouped Avatars

<div class="quanta-avatar-group">
  <span class="quanta-avatar quanta-avatar-md quanta-avatar-primary">J</span>
  <span class="quanta-avatar quanta-avatar-md quanta-avatar-success">D</span>
  <span class="quanta-avatar quanta-avatar-md quanta-avatar-info">E</span>
</div>

J D E

With Badge

<div class="quanta-avatar-wrapper">
  <span class="quanta-avatar quanta-avatar-md quanta-avatar-secondary">C</span>
  <span class="quanta-avatar-badge quanta-badge-success">9+</span>
</div>

C 9+

Initials Support with JavaScript

If your avatars are dynamically generated, you can auto-initialize them using data-name. This script finds all avatar elements with data-name and sets the first letter if there's no content.

<span class="quanta-avatar quanta-avatar-lg quanta-avatar-dark" data-name="Cody"></span>