Avatar (avatar
)
Apply a circular mask to the image
🔗 External documentation.
ID | Label | Description | Schema |
---|---|---|---|
image | Image |
id: avatar
label: Avatar
description: 'Apply a circular mask to the image'
homepage: 'https://design-system.w3.org/styles/avatars.html'
variants:
default:
id: default
label: Default
med:
id: med
label: Medium
small:
id: small
label: Small
slots:
image:
id: image
label: Image
examples:
preview:
id: preview
label: Preview
renderable:
'@component': avatar
image:
'@element': img
src: 'https://www.w3.org/thumbnails/200/avatar-images/7mtpjeh4in8kw04ksso8ss4ocsksswo.webp'
loading: lazy
Default
(
default
)

Medium
(
med
)

Small
(
small
)
