• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express

Avatar

Component status
Contribution
Last releasedJune 16, 2022
Current version@spectrum-css/avatar@5.0.19
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Usage notes

An image representing a user.

Variants

Standard
Verified

50

Avatar
Disabled Avatar

75

Avatar
Disabled Avatar

100 (default)

Avatar
Disabled Avatar

200

Avatar
Disabled Avatar

300

Avatar
Disabled Avatar

400

Avatar
Disabled Avatar

500

Avatar
Disabled Avatar

600

Avatar
Disabled Avatar

700

Avatar
Disabled Avatar
Show markup
<div class="spectrum-Examples spectrum-Examples--vertical">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">50</h4>
    <div class="spectrum-Avatar spectrum-Avatar--size50">
      <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
    </div>
    <div class="spectrum-Avatar spectrum-Avatar--size50 is-disabled"">
      <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">75</h4>
    <div class="spectrum-Avatar spectrum-Avatar--size75">
      <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
    </div>
    <div class="spectrum-Avatar spectrum-Avatar--size75 is-disabled"">
      <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">100 (default)</h4>
    <div class="spectrum-Avatar spectrum-Avatar--size100">
      <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
    </div>
    <div class="spectrum-Avatar spectrum-Avatar--size100 is-disabled"">
      <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">200</h4>
    <div class="spectrum-Avatar spectrum-Avatar--size200">
      <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
    </div>
    <div class="spectrum-Avatar spectrum-Avatar--size200 is-disabled"">
      <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">300</h4>
    <div class="spectrum-Avatar spectrum-Avatar--size300">
      <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
    </div>
    <div class="spectrum-Avatar spectrum-Avatar--size300 is-disabled"">
      <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">400</h4>
    <div class="spectrum-Avatar spectrum-Avatar--size400">
      <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
    </div>
    <div class="spectrum-Avatar spectrum-Avatar--size400 is-disabled"">
      <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">500</h4>
    <div class="spectrum-Avatar spectrum-Avatar--size500">
      <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
    </div>
    <div class="spectrum-Avatar spectrum-Avatar--size500 is-disabled"">
      <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">600</h4>
    <div class="spectrum-Avatar spectrum-Avatar--size600">
      <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
    </div>
    <div class="spectrum-Avatar spectrum-Avatar--size600 is-disabled"">
      <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
    </div>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">700</h4>
    <div class="spectrum-Avatar spectrum-Avatar--size700">
      <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
    </div>
    <div class="spectrum-Avatar spectrum-Avatar--size700 is-disabled"">
      <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Disabled Avatar">
    </div>
  </div>
</div>

Migration Guide

A div wrapper is required for avatar

<div class="spectrum-Avatar spectrum-Avatar--size50">
  <img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
</div>

Sizes added to avatar.

A second class has to be added to spectrum-Avatar to declare which size to use. The available size classes are: spectrum-Avatar--size50, spectrum-Avatar--size75, spectrum-Avatar--size100, spectrum-Avatar--size200, spectrum-Avatar--size300, spectrum-Avatar--size400, spectrum-Avatar--size500, spectrum-Avatar--size600, and spectrum-Avatar--size700.

No results found

Try another search term.