@spectrum-web-components/avatar NPM | npm.io

0.49.0 • Published 1 year ago

Install

Weekly downloads

100

License

Apache-2.0

Repository

Last release

1 year ago

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.

design-system spectrum adobe adobe-spectrum web components web-components lit-element lit-html component css

@spectrum-web-components/base @spectrum-web-components/shared

@infinitebrahmanuniverse/nolb-_spe @everything-registry/sub-chunk-857 @swc-react/avatar @spectrum-web-components/bundle

8 months ago

0.0.0-20250211061642

10 months ago

0.0.0-20241211110529

1 year ago

1.7.0-snapshot.20250519151006

7 months ago

0.0.0-20241209155954

1 year ago

9 months ago

8 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

0.0.0-20241211114228

1 year ago

10 months ago

0.0.0-20250210092211

10 months ago

9 months ago

8 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

0.0.0-20250327111926

9 months ago

1.7.0-snapshot.20250519143559

7 months ago

0.0.0-20241211115453

1 year ago

9 months ago

9 months ago

8 months ago

0.0.0-20250210095839

10 months ago

10 months ago

1.7.0-snapshot.20250609112703

6 months ago

1 year ago

1 year ago

0.0.0-20241211113516

1 year ago

1 year ago

1.0.1-color-testing

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1.3.0-testing.0

10 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

11 months ago

11 months ago

0.0.0-20250210074307

10 months ago

10 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

9 months ago

1 year ago

1 year ago

1 year ago

1 year ago

0.0.0-20241211111227

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

10 months ago

1 year ago

10 months ago

1 year ago

1.6.1-preview-2d9fabee.20250507183133

8 months ago

0.0.0-20250210113716

10 months ago

0.0.0-20241211112232

1 year ago

1 year ago

0.0.0-20250210080630

10 months ago

10 months ago

0.0.0-20241211071818

1 year ago

10 months ago

10 months ago

10 months ago

10 months ago

0.0.0-20250210081721

10 months ago

10 months ago

10 months ago

10 months ago

0.0.0-20250210104349

10 months ago

0.0.0-20241211070850

1 year ago

6 months ago

9 months ago

0.0.0-20241211112924

1 year ago

1.7.0-snapshot.20250519200040

7 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

8 months ago

10 months ago

0.0.0-20250410163257

8 months ago

0.0.0-modal-performance-20250414163725

8 months ago

10 months ago

0.0.0-20250210075156

10 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

1 year ago

1 year ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.33.3-overlay.66

2 years ago

0.33.3-overlay.65

2 years ago

0.33.3-overlay.61

2 years ago

0.31.1-react.21

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

0.30.1-overlay.30

3 years ago

0.33.1-overlay.39

3 years ago

0.30.1-overlay.31

3 years ago

3 years ago

3 years ago

0.30.1-overlay.38

3 years ago

0.30.1-overlay.37

3 years ago

0.30.1-overlay.41

3 years ago

0.30.1-overlay.42

3 years ago

0.30.1-overlay.40

3 years ago

3 years ago

0.33.1-overlay.41

3 years ago

0.32.1-overlay.33

3 years ago

0.32.1-overlay.41

3 years ago

3 years ago

0.31.1-overlay.29

3 years ago

0.11.3-overlay.22

3 years ago

0.11.5-overlay.18

3 years ago

0.11.5-overlay.17

3 years ago

0.11.5-overlay.14

3 years ago

0.11.5-overlay.13

3 years ago

0.11.5-overlay.15

3 years ago

0.11.5-overlay.10

3 years ago

0.11.5-overlay.12

3 years ago

0.11.5-overlay.11

3 years ago

3 years ago

3 years ago

3 years ago

0.11.3-overlay.8

3 years ago

0.11.3-overlay.9

3 years ago

3 years ago

0.11.2-overlay.8

3 years ago

0.10.6-react.75

3 years ago

0.10.6-react.49

3 years ago

0.10.6-react.48

3 years ago

3 years ago

0.10.6-react.50

3 years ago

0.10.3-react.54

3 years ago

3 years ago

3 years ago

3 years ago

0.10.6-react.32

3 years ago

0.10.5-overlay-warning.19

3 years ago

3 years ago

3 years ago

0.10.0-devmode.0

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

0.9.12-devmode.7

3 years ago

0.9.12-devmode.0

3 years ago

0.9.13-devmode2.0

3 years ago

0.9.13-devmode.0

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

0.9.4-express.9

4 years ago

0.9.2-express.41

4 years ago

4 years ago

4 years ago

0.9.3-express.12

4 years ago

4 years ago

4 years ago

4 years ago

0.8.1-lit-next.0

4 years ago

4 years ago

0.7.10-lit-next.47

4 years ago

0.7.10-lit-next.24

4 years ago

4 years ago

0.7.10-lit-next.0

4 years ago

0.7.9-lit-next.42

4 years ago

4 years ago

0.7.9-lit-next.0

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

0.4.4-alpha.178

5 years ago

5 years ago

0.4.4-alpha.169

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago