- Light
- Dark
- Darkest
- Medium
- Large
- LTR
- RTL
- Default
- Express
Avatar
Component status | Contribution |
---|---|
Current version | @spectrum-css/avatar@7.2.0 |
Released | September 17, 2024 |
S2-foundations | @spectrum-css/avatar@8.0.0-s2-foundations.15 |
Released | October 4, 2024 |
Usage notes
An image representing a user.
An avatar image is wrapped in a link that uses the .spectrum-Avatar-link
class by default, however, an avatar may also be used without a link.
When disabled the avatar should only be used without a link.
Variants
StandardContribution
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">
<a href="#" class="spectrum-Avatar-link">
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
</a>
</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">
<a href="#" class="spectrum-Avatar-link">
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
</a>
</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">
<a href="#" class="spectrum-Avatar-link">
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
</a>
</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">
<a href="#" class="spectrum-Avatar-link">
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
</a>
</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">
<a href="#" class="spectrum-Avatar-link">
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
</a>
</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">
<a href="#" class="spectrum-Avatar-link">
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
</a>
</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">
<a href="#" class="spectrum-Avatar-link">
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
</a>
</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">
<a href="#" class="spectrum-Avatar-link">
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
</a>
</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">
<a href="#" class="spectrum-Avatar-link">
<img class="spectrum-Avatar-image" src="img/example-ava.jpg" alt="Avatar">
</a>
</div>
</div>
</div>
No LinkContribution
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">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>
Custom Properties API
This component can be modified via its --mod-*
prefixed custom properties. A list of those prefixed custom properties can be found here.
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
.