Avatar

Default

Use .avatar for a circle. Give standalone initials an accessible name.

JD

<span class="avatar" aria-label="John Doe">JD</span>

Image

Apply .avatar to an image and use meaningful alternative text when it conveys identity.

<img class="avatar avatar-xl" src="/favicon.svg" alt="Astro" />

The class also supports an image wrapper.

<span class="avatar avatar-xl">
	<img src="/favicon.svg" alt="Astro" />
</span>

Sizes

Sizes are .avatar-sm through .avatar-xl; medium is the default.

<span class="avatar avatar-sm" aria-label="John Doe">JD</span>
<span class="avatar avatar-md" aria-label="John Doe">JD</span>
<span class="avatar avatar-lg" aria-label="John Doe">JD</span>
<span class="avatar avatar-xl" aria-label="John Doe">JD</span>

Square

Add .avatar-square for a rounded square.

JD

<span class="avatar avatar-lg avatar-square bg-primary" aria-label="John Doe"> JD </span>

CSS Variables

Override these variables on the component or an ancestor.

--avatar-size: 2.5rem;
--avatar-border-radius: 50%;
--avatar-bg-color: var(--bg-highlight);
--avatar-color: var(--text-color);
--avatar-border-width: 0;
--avatar-border-color: transparent;
--avatar-font-size: var(--font-size-sm);
--avatar-font-weight: 700;
--avatar-image-fit: cover;
--avatar-image-position: center;