An <sp-avatar>
is a great way to feature a visual representation of a user.
yarn add @spectrum-web-components/avatar
Import the side effectful registration of <sp-avatar>
via:
import '@spectrum-web-components/avatar/sp-avatar.js';
When looking to leverage the Avatar
base class as a type and/or for extension purposes, do so via:
import { Avatar } from '@spectrum-web-components/avatar';
50
<sp-avatar
size="50"
label="Demo User"
src="https://picsum.photos/500/500"
></sp-avatar>
<sp-avatar
size="75"
label="Demo User"
src="https://picsum.photos/500/500"
></sp-avatar>
<sp-avatar
size="100"
label="Demo User"
src="https://picsum.photos/500/500"
></sp-avatar>
<sp-avatar
size="200"
label="Demo User"
src="https://picsum.photos/500/500"
></sp-avatar>
<sp-avatar
size="300"
label="Demo User"
src="https://picsum.photos/500/500"
></sp-avatar>
<sp-avatar
size="400"
label="Demo User"
src="https://picsum.photos/500/500"
></sp-avatar>
<sp-avatar
size="500"
label="Demo User"
src="https://picsum.photos/500/500"
></sp-avatar>
<sp-avatar
size="600"
label="Demo User"
src="https://picsum.photos/500/500"
></sp-avatar>
<sp-avatar
size="700"
label="Demo User"
src="https://picsum.photos/500/500"
></sp-avatar>
The label
attribute of the <sp-avatar>
will be passed into the <img>
element as the alt
tag for use in defining a textual representation of the image displayed.