Avatar

Use <figure data-variant="avatar"> with an <img> tag to create an avatar. Can also use text initials with <abbr> or icons instead of image.

<figure data-variant="avatar" class="small" aria-label="Jane Doe">
    <img src="/avatar.svg" alt="" />
</figure>

<figure data-variant="avatar" aria-label="Oat">
    <abbr title="Jane Doe">OT</abbr>
</figure>

<figure data-variant="avatar" aria-label="Jane Doe">
    <img src="/avatar.svg" alt="" />
</figure>

<figure data-variant="avatar" class="large" aria-label="Jane Doe">
    <img src="/avatar.svg" alt="" />
</figure>

Avatar group

Wrap avatars in <figure data-variant="avatar" role="group"> for grouped avatars. To control the size of all avatars in the group, add .small or .large to the group container.

<figure data-variant="avatar" role="group" class="small" aria-label="Team members">
    <figure data-variant="avatar" aria-label="Jane Doe">
        <img src="/avatar.svg" alt="" />
    </figure>
    <figure data-variant="avatar" aria-label="John Smith">
        <img src="/avatar.svg" alt="" />
    </figure>
    <figure data-variant="avatar" aria-label="Alex Lee">
        <img src="/avatar.svg" alt="" />
    </figure>
</figure>

<figure data-variant="avatar" role="group" aria-label="Team members">
    <figure data-variant="avatar" aria-label="Jane Doe">
        <img src="/avatar.svg" alt="" />
    </figure>
    <figure data-variant="avatar" aria-label="John Smith">
        <img src="/avatar.svg" alt="" />
    </figure>
    <figure data-variant="avatar" aria-label="Alex Lee">
        <img src="/avatar.svg" alt="" />
    </figure>
</figure>

<figure data-variant="avatar" role="group" class="large" aria-label="Team members">
    <figure data-variant="avatar" aria-label="Jane Doe">
        <img src="/avatar.svg" alt="" />
    </figure>
    <figure data-variant="avatar" aria-label="John Smith">
        <img src="/avatar.svg" alt="" />
    </figure>
    <figure data-variant="avatar" aria-label="Alex Lee">
        <img src="/avatar.svg" alt="" />
    </figure>
</figure>