Skip to content

Type to search the docs, API, and blog.

↑↓ navigate↵ openesc close
Zazz 0.7 alpha
API navigation

API

Avatar

A user image or initials, alone or stacked, composed from utilities.

Installation

pnpm dlx zazz-ui add avatar
npx zazz-ui add avatar
yarn dlx zazz-ui add avatar
bunx zazz-ui add avatar

Run zazz-ui init first if the project has no zazz/ folder yet.

Examples

John Doe
John Doe Founder, ACME Inc.
John Doe
John Doe Founder, ACME Inc. 
<div
  style="
    --display: flex;
    --items: center;
    --gap: 2;
  "
>
  <figure
    data-ui="pile"
    role="img"
    style="
      --display: grid;
      --size: 11;
      --bg: var(--color-background);
      --border-color: var(--color-border);
      --border-width: 1px;
      --rounded: var(--radius-full);
      --overflow: clip;
    "
  >
    <img
      width="64"
      height="64"
      loading="lazy"
      src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=facearea&facepad=2&w=64&h=64&q=90"
      alt="John Doe"
      aria-hidden="true"
      style="
        --order: 9999;
        --size: 100%;
        --bg: transparent;
        --object-fit: cover;
      "
    />
    <figcaption
      style="
        --display: flex;
        --items: center;
        --justify: center;
        --order: -9999;
        --size: 100%;
        --font-size: var(--font-size-md);
        --font-weight: strong;
        --leading: var(--leading-md);
        --tracking: var(--tracking-md);
        --text-align: center;
        --text: var(--color-muted-foreground);
        --bg: var(--color-muted);
      "
    >
      <span data-ui="sr-only">John Doe</span>
      <span aria-hidden="true">JD</span>
    </figcaption>
  </figure>
  <div style="--display: flex-col">
    <span
      style="
        --font-size: var(--font-size-sm);
        --font-weight: strong;
        --leading: 1;
        --leading: var(--leading-sm);
        --tracking: var(--tracking-sm);
      "
      >John Doe</span
    >
    <span
      style="
        --font-size: var(--font-size-xs);
        --leading: var(--leading-xs);
        --tracking: var(--tracking-xs);
        --text: var(--color-muted-foreground);
      "
      >Founder, ACME Inc.</span
    >
  </div>
</div>

<div
  style="
    --display: flex;
    --items: center;
    --gap: 2;
  "
>
  <figure
    data-ui="pile"
    role="img"
    style="
      --display: grid;
      --size: 11;
      --bg: var(--color-background);
      --border-color: var(--color-border);
      --border-width: 1px;
      --rounded: var(--radius-full);
      --overflow: clip;
    "
  >
    <figcaption
      style="
        --display: flex;
        --items: center;
        --justify: center;
        --order: -9999;
        --size: 100%;
        --font-size: var(--font-size-md);
        --font-weight: strong;
        --leading: var(--leading-md);
        --tracking: var(--tracking-md);
        --text-align: center;
        --text: var(--color-muted-foreground);
        --bg: var(--color-muted);
      "
    >
      <span data-ui="sr-only">John Doe</span>
      <span aria-hidden="true">JD</span>
    </figcaption>
  </figure>
  <div style="--display: flex-col">
    <span
      style="
        --font-size: var(--font-size-sm);
        --font-weight: strong;
        --leading: 1;
        --leading: var(--leading-sm);
        --tracking: var(--tracking-sm);
      "
      >John Doe</span
    >
    <span
      style="
        --font-size: var(--font-size-xs);
        --leading: var(--leading-xs);
        --tracking: var(--tracking-xs);
        --text: var(--color-muted-foreground);
      "
      >Founder, ACME Inc.</span
    >
  </div>
</div>

Attributes

This primitive is a composition of other primitives and utilities: it has no presets, slots, or hooks of its own. Copy its example and adapt it.