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 )

<div class="avatar"> <img loading="lazy" src="https://www.w3.org/thumbnails/200/avatar-images/7mtpjeh4in8kw04ksso8ss4ocsksswo.webp" /> </div>

Medium ( med )

<div class="avatar--med avatar"> <img loading="lazy" src="https://www.w3.org/thumbnails/200/avatar-images/7mtpjeh4in8kw04ksso8ss4ocsksswo.webp" /> </div>

Small ( small )

<div class="avatar--small avatar"> <img loading="lazy" src="https://www.w3.org/thumbnails/200/avatar-images/7mtpjeh4in8kw04ksso8ss4ocsksswo.webp" /> </div>