- Lightest
- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
Avatar
| Component status | Contribution |
|---|---|
| Last released | Unreleased |
| Current version | @spectrum-css/avatar@4.0.0-alpha.1 |
Usage notes
An image representing a user.
Variants
StandardVerified
50
75
100 (default)
200
300
400
500
600
700
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>
<img class="spectrum-Avatar spectrum-Avatar--size50" src="img/example-ava.jpg" alt="Avatar">
<img class="spectrum-Avatar spectrum-Avatar--size50 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">75</h4>
<img class="spectrum-Avatar spectrum-Avatar--size75" src="img/example-ava.jpg" alt="Avatar">
<img class="spectrum-Avatar spectrum-Avatar--size75 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">100 (default)</h4>
<img class="spectrum-Avatar spectrum-Avatar--size100" src="img/example-ava.jpg" alt="Avatar">
<img class="spectrum-Avatar spectrum-Avatar--size100 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">200</h4>
<img class="spectrum-Avatar spectrum-Avatar--size200" src="img/example-ava.jpg" alt="Avatar">
<img class="spectrum-Avatar spectrum-Avatar--size200 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">300</h4>
<img class="spectrum-Avatar spectrum-Avatar--size300" src="img/example-ava.jpg" alt="Avatar">
<img class="spectrum-Avatar spectrum-Avatar--size300 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">400</h4>
<img class="spectrum-Avatar spectrum-Avatar--size400" src="img/example-ava.jpg" alt="Avatar">
<img class="spectrum-Avatar spectrum-Avatar--size400 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">500</h4>
<img class="spectrum-Avatar spectrum-Avatar--size500" src="img/example-ava.jpg" alt="Avatar">
<img class="spectrum-Avatar spectrum-Avatar--size500 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">600</h4>
<img class="spectrum-Avatar spectrum-Avatar--size600" src="img/example-ava.jpg" alt="Avatar">
<img class="spectrum-Avatar spectrum-Avatar--size600 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
</div>
<div class="spectrum-Examples-item">
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">700</h4>
<img class="spectrum-Avatar spectrum-Avatar--size700" src="img/example-ava.jpg" alt="Avatar">
<img class="spectrum-Avatar spectrum-Avatar--size700 is-disabled" src="img/example-ava.jpg" alt="Disabled Avatar">
</div>
</div>
Migration Guide
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.