@spectrum-web-components/avatar
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

Description

An <sp-avatar> is a great way to feature a visual representation of a user.

Usage

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

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

50
<sp-avatar
    size="50"
    label="Demo User"
    src="https://picsum.photos/500/500"
></sp-avatar>
75
<sp-avatar
    size="75"
    label="Demo User"
    src="https://picsum.photos/500/500"
></sp-avatar>
100
<sp-avatar
    size="100"
    label="Demo User"
    src="https://picsum.photos/500/500"
></sp-avatar>
200
<sp-avatar
    size="200"
    label="Demo User"
    src="https://picsum.photos/500/500"
></sp-avatar>
300
<sp-avatar
    size="300"
    label="Demo User"
    src="https://picsum.photos/500/500"
></sp-avatar>
400
<sp-avatar
    size="400"
    label="Demo User"
    src="https://picsum.photos/500/500"
></sp-avatar>
500
<sp-avatar
    size="500"
    label="Demo User"
    src="https://picsum.photos/500/500"
></sp-avatar>
600
<sp-avatar
    size="600"
    label="Demo User"
    src="https://picsum.photos/500/500"
></sp-avatar>
700
<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.

Dependencies (2)

Dev Dependencies (1)

Package Sidebar

Install

npm i @spectrum-web-components/avatar

Weekly Downloads

3,090

Version

1.0.0

License

Apache-2.0

Unpacked Size

131 kB

Total Files

48

Last publish

Collaborators

  • caseyisonit
  • rubenc
  • pvashish
  • nikkimk
  • jnjosh
  • taratadobe
  • rajrock38
  • beeduul
  • jianliao79
  • hunterloftis
  • westbrook
  • benjamind
  • cuberoot