@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.

/@spectrum-web-components/avatar/

    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