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

1.7.0 • Published 5 months ago

Install

Weekly downloads

100

License

Apache-2.0

Repository

Last release

5 months 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

6 months ago

0.0.0-20250211061642

9 months ago

0.0.0-20241211110529

11 months ago

1.7.0-snapshot.20250519151006

6 months ago

0.0.0-20241209155954

11 months ago

8 months ago

7 months ago

9 months ago

9 months ago

8 months ago

8 months ago

8 months ago

8 months ago

0.0.0-20241211114228

11 months ago

9 months ago

0.0.0-20250210092211

9 months ago

8 months ago

7 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

0.0.0-20250327111926

8 months ago

1.7.0-snapshot.20250519143559

6 months ago

0.0.0-20241211115453

11 months ago

8 months ago

8 months ago

7 months ago

0.0.0-20250210095839

9 months ago

9 months ago

1.7.0-snapshot.20250609112703

5 months ago

1 year ago

1 year ago

0.0.0-20241211113516

11 months ago

1 year ago

1.0.1-color-testing

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1.3.0-testing.0

8 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

12 months ago

1 year ago

1 year ago

12 months ago

12 months ago

12 months ago

10 months ago

10 months ago

0.0.0-20250210074307

9 months ago

9 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

8 months ago

12 months ago

12 months ago

12 months ago

12 months ago

0.0.0-20241211111227

11 months ago

12 months ago

11 months ago

11 months ago

12 months ago

11 months ago

11 months ago

9 months ago

12 months ago

9 months ago

12 months ago

1.6.1-preview-2d9fabee.20250507183133

6 months ago

0.0.0-20250210113716

9 months ago

0.0.0-20241211112232

11 months ago

11 months ago

0.0.0-20250210080630

9 months ago

9 months ago

0.0.0-20241211071818

11 months ago

9 months ago

9 months ago

9 months ago

9 months ago

0.0.0-20250210081721

9 months ago

9 months ago

9 months ago

9 months ago

0.0.0-20250210104349

9 months ago

0.0.0-20241211070850

11 months ago

5 months ago

8 months ago

0.0.0-20241211112924

11 months ago

1.7.0-snapshot.20250519200040

6 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

6 months ago

9 months ago

0.0.0-20250410163257

7 months ago

0.0.0-modal-performance-20250414163725

7 months ago

9 months ago

0.0.0-20250210075156

9 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

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

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

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.30.1-overlay.30

3 years ago

0.33.1-overlay.39

2 years ago

0.30.1-overlay.31

3 years ago

2 years ago

2 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

2 years ago

0.32.1-overlay.33

2 years ago

0.32.1-overlay.41

2 years ago

2 years ago

0.31.1-overlay.29

2 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

3 years ago

4 years ago

3 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

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

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

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