Avatar Base

Fetch pattern JSON: curl https://webspire.de/patterns/avatar/base.json

base.html

<div class="ws-avatar flex items-center gap-4">
  <span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-[var(--ws-avatar-bg)] text-xs font-medium text-[var(--ws-avatar-text)]" aria-label="Avatar XS">AB</span>
  <span class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-[var(--ws-avatar-bg)] text-xs font-medium text-[var(--ws-avatar-text)]" aria-label="Avatar SM">CD</span>
  <span class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-[var(--ws-avatar-bg)] text-sm font-medium text-[var(--ws-avatar-text)]" aria-label="Avatar MD">EF</span>
  <span class="inline-flex h-14 w-14 items-center justify-center rounded-full bg-[var(--ws-avatar-bg)] text-lg font-medium text-[var(--ws-avatar-text)]" aria-label="Avatar LG">GH</span>
</div>

Details

Family

avatar

Tier

base

Kind

component

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste

Stable Published

avatarinitialsuserprofilesizes

Slots

Name	Required	Description
initials	Yes	Two-letter initials displayed inside the avatar.

Colored circle avatars displaying user initials in four sizes (xs, sm, md, lg). Use as a baseline for user representation throughout the interface.