75Avatar

People: image or mono initials on a sunken disc. The ring wrapper draws course progress as a conic arc; stacks overlap with a surface ring so faces stay separable.

Use it for

Instructors, students, authors — wherever a person appears
Progress ring — a learner's completion on their own avatar

Not for

Logos or course art — use Image
Decoration — an avatar always stands for a real person

Sizes

NS SW AR PK

markup

<span class="ns-avatar ns-avatar--sm">NS</span>
<span class="ns-avatar">SW</span>
<span class="ns-avatar ns-avatar--lg">AR</span>
<span class="ns-avatar ns-avatar--xl">PK</span>

Image

markup

<span class="ns-avatar ns-avatar--lg"><img src="../assets/logo/icon-512.png" alt="Namaste Salesforce"></span>

Progress ring

--p is percent complete; the arc is the same conic device as the chart ring.

25 64

markup

<span class="ns-avatar-ring" style="--p:25"><span class="ns-avatar">25</span></span>
<span class="ns-avatar-ring" style="--p:64"><span class="ns-avatar">64</span></span>
<span class="ns-avatar-ring" style="--p:100"><span class="ns-avatar"><i class="ph ph-check-circle" aria-hidden="true"></i></span></span>

Stack

Overlapped with a surface ring; the last disc counts the rest.

AK RS MJ +9

markup

<span class="ns-avatar-stack">
  <span class="ns-avatar">AK</span>
  <span class="ns-avatar">RS</span>
  <span class="ns-avatar">MJ</span>
  <span class="ns-avatar ns-avatar--more">+9</span>
</span>

Accessibility contract

Image avatars carry the person's name as alt
Initials avatars pair with the visible name or an aria-label — initials alone are not a name