sp-avatar
Attributes and Properties #
size
size
AvatarSize
src
src
string
''
Description #
An <sp-avatar>
is a great way to feature a visual representation of a user.
Usage #
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';
Sizes #
<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>
Accessibility #
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.