data

Avatar

A small picture or the initials of a person or organization.

CSS onlyPlain classes; no JavaScript in any stack.

Usage

Initials in a <span> with role="img" and the full name as its aria-label.

<span class="ca-avatar ca-avatar--md" role="img" aria-label="Sam de Vries">SV</span>

Examples

Sizes

Pick the size that fits the text next to it.

SV NB LJ

<div class="flex items-center gap-3">
  <span class="ca-avatar ca-avatar--sm" role="img" aria-label="Sam de Vries">SV</span>
  <span class="ca-avatar ca-avatar--md" role="img" aria-label="Noor Bakker">NB</span>
  <span class="ca-avatar ca-avatar--lg" role="img" aria-label="Lucas Jansen">LJ</span>
</div>

With an image

Put an <img> with ca-avatar__image inside; it fills the avatar.

<span class="ca-avatar ca-avatar--lg">
  <img class="ca-avatar__image" src="/brand/calaca-ui-avatar.svg" alt="Calaca UI" width="56" height="56" />
</span>

Guidance and accessibility

When to use

Use an avatar to help people recognize a person or organization in a list, a comment or a header.
Show the name next to it when there is room; a face or initials alone are hard to tell apart.

Accessibility

Give initials role="img" and the full name as aria-label; give an image alt with the name.
When the name is already written next to the avatar, the avatar is decoration: use alt="" or aria-hidden="true".

Classes

Generated from the component contract. Parts use __, modifiers use --.

Classes of the avatar component
Class	Kind	Use it for
`ca-avatar`	Component	The frame that clips a picture or centers initials.
`ca-avatar__image`	Part	An `<img>` that fills the avatar.
`ca-avatar--sm`	Size	Small, for lists and tables.
`ca-avatar--md`	Size	Default size.
`ca-avatar--lg`	Size	Large, for profile headers.

Skins

The same markup, dressed by each skin. Structure and behavior stay the same; only the look changes.

Base skin

Neutral grayscale starting point; product skins extend it and change what differs.

Calaca skin

The Calaca UI brand: hueso paper and tinta ink, cempasúchil marigold, rosa and jade.

Proof skin

Pilot skin pushed far from base: square, heavy, offset shadows, larger targets.

Crossview skin

The CrossView proofing table: cool ground, bond-paper sheets, rule-grey hairlines, one red mark.

Framework notes

Link the prebuilt stylesheet of your skin next to your brand theme. No build step.

<link rel="stylesheet" href="theme.css" />
<link rel="stylesheet" href="ca-base.css" />

In Astro, Vite and other Tailwind projects, import Calaca after Tailwind and your theme in your main stylesheet.

@import "tailwindcss";
@import "./theme.css";
@import "@calaca/ui/core.css";
@import "@calaca/ui/skins/base.css";

Same stylesheet as above; write the classes in className.

<button className="ca-button ca-button--primary ca-button--md" type="button">Save changes</button>

Search

Documentation