An avatar image with an initials fallback. When src is set, alt is the accessible name; without src the component shows initials derived from name (or alt) while keeping that name available to AT. An optional status adds a ring, a dot, and visually-hidden status text.

Examples

<.avatar src="/u/ada.jpg" alt="Ada Lovelace" status="online" />
<.avatar name="Grace Hopper" size="lg" />

Attributes

• src (:string) - image URL; when absent, initials are shown. Defaults to nil.
• alt (:string) - accessible name. Required with src; used to derive initials without one. Defaults to nil.
• name (:string) - full name; used to compute fallback initials. Defaults to nil.
• size (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
• shape (:string) - Defaults to "circle". Must be one of "circle", or "square".
• status (:string) - Adds a status ring + dot with an accessible label. Defaults to nil. Must be one of nil, "online", "away", "busy", or "offline".
• Global attributes are accepted.

Stacks avatars into an overlapping cluster. Pair with a manual "+N" badge, or set max-aware markup upstream; the group carries an accessible name.

Examples

<.avatar_group label="Project members">
  <.avatar name="Ada Lovelace" />
  <.avatar name="Grace Hopper" />
  <span class="aui-avatar-group__overflow" aria-hidden="true">+3</span>
</.avatar_group>

Attributes

• max (:integer) - Cap the visible avatars; the rest become a +N pill. Defaults to nil.
• label (:string) - accessible name for the whole group (role=group). Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required) - the avatar/1 items.

A small status/label pill. Supports variant, size, an optional leading dot, and a removable mode whose remove control is a real, labelled button.

Examples

<.badge variant="success" dot>Live</.badge>
<.badge removable on_remove={JS.push("drop", value: %{id: 7})}>Tag</.badge>

Attributes

• variant (:string) - Defaults to "neutral". Must be one of "neutral", "info", "success", "warning", "danger", or "accent".
• size (:string) - Defaults to "md". Must be one of "sm", "md", or "lg".
• dot (:boolean) - Show a leading status dot. Defaults to false.
• removable (:boolean) - Render a real remove button; wire it with on_remove. Defaults to false.
• on_remove (:any) - phx-click event/JS for the remove button. Defaults to nil.
• remove_label (:string) - Defaults to "Remove".
• Global attributes are accepted.

Slots

• inner_block (required)

A surface container with optional header, media, body, and footer slots.

With interactive and a destination, the entire card becomes one clickable link via a stretched anchor — do not place other interactive controls inside it. elevation sets the resting shadow; selected marks the current card.

When not to use

If the card needs several independent actions (buttons, links), keep it non-interactive and let those controls be the interactive elements.

Examples

<.card>
  <:header><h3>Weekly report</h3></:header>
  <:body>Everything nominal.</:body>
</.card>

<.card interactive navigate={~p"/reports/42"} link_label="Open report 42">
  <:header><h3>Report #42</h3></:header>
</.card>

Attributes

• elevation (:string) - resting shadow depth. Defaults to "sm". Must be one of "flat", "sm", or "md".
• interactive (:boolean) - Make the whole card a single link. Requires navigate/patch/href. Defaults to false.
• selected (:boolean) - Marks a chosen card (aria-current). Defaults to false.
• loading (:boolean) - Render a skeleton placeholder. Defaults to false.
• navigate (:string) - Defaults to nil.
• patch (:string) - Defaults to nil.
• href (:string) - Defaults to nil.
• link_label (:string) - accessible name for the stretched link when the header text is not enough. Defaults to nil.
• Global attributes are accepted.

Slots

• header - title area; rendered in a <header>.
• media - edge-to-edge media (image/video) above the body.
• body - main content.
• footer - actions or metadata; omit inside an interactive card.
• inner_block - shorthand body when the :body slot is not used.

A semantic description list: a real <dl> with <dt>/<dd> pairs, laid out as a responsive two-column grid that stacks on narrow screens.

Examples

<.description_list>
  <:item term="Plan">Pro</:item>
  <:item term="Renews">March 1, 2026</:item>
</.description_list>

Attributes

• Global attributes are accepted.

Slots

• item - one term/description pair. Accepts attributes:
  • term (:string) (required) - the <dt> text.

A KPI block: label, big value, an optional delta with an accessible direction, and a description. The trend is conveyed with a caret and hidden "increased/decreased" text so it never depends on color alone.

Examples

<.stat label="Monthly revenue" value="$48,120" delta="12%" trend="up"
  description="vs. last month" />

Attributes

• label (:string) (required) - what the number measures.
• value (:string) (required) - the headline value (pre-formatted).
• delta (:string) - change magnitude, e.g. "12%". Pair with trend for direction. Defaults to nil.
• trend (:string) - direction of delta; also emitted as visually-hidden text, not color alone. Defaults to "flat". Must be one of "up", "down", or "flat".
• description (:string) - supporting context under the value. Defaults to nil.
• loading (:boolean) - Render a skeleton placeholder. Defaults to false.
• Global attributes are accepted.