An admonition/note box rendered as an <aside>.

variant selects the tone and default icon: note (info), tip (success), warning, danger. Color comes from status tokens; the icon is decorative and the optional title labels the aside.

Examples

<.callout variant="warning" title="Heads up">
  This action cannot be undone.
</.callout>

Attributes

• variant (:string) - Defaults to "note". Must be one of "note", "tip", "warning", or "danger".
• title (:string) - optional heading; becomes the aside's accessible name. Defaults to nil.
• id (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• icon - overrides the default variant icon (decorative).
• inner_block (required)

A <pre><code> block with a language label, a copy button, and a horizontally scrollable, keyboard-focusable content region.

Content is interpolated with {@code}, so HEEx HTML-escapes it — there is no raw-HTML path and pasted markup cannot inject nodes. The block carries a stable aui-code class and a language-* class so a class-based syntax theme / highlighter can style tokens; the background comes from tokens (--aui-surface-sunken). Copy uses phx-hook="AuroraCopyButton" with data-aui-copy-target pointing at the <code> element.

Examples

<.code_block language="elixir" code={~s|IO.puts("hi")|} />
<.code_block filename="mix.exs" code={@source} />

Attributes

• id (:string) - stable id; the copy button targets the <code> element. Defaults to nil.
• code (:string) (required) - raw source; escaped on render, never treated as HTML.
• language (:string) - language label + language-* class for highlighters. Defaults to nil.
• filename (:string) - optional filename shown in place of the language label. Defaults to nil.
• show_copy (:boolean) - Defaults to true.
• Global attributes are accepted.

A responsive grid of media, keyboard-navigable through the natural tab order of the links/controls inside each item.

Lightbox / zoom-to-fullscreen is intentionally out of scope — it needs focus-trapping overlay behavior that belongs to the overlay family; compose this gallery with a dialog if you need it.

Examples

<.gallery label="Product shots" min_item_width="14rem">
  <li :for={shot <- @shots}>
    <.media ratio="1/1"><img src={shot.url} alt={shot.alt} /></.media>
  </li>
</.gallery>

Attributes

• label (:string) - accessible name for the gallery list. Defaults to nil.
• min_item_width (:string) - minimum column width; the grid auto-fits as many columns as fit. Defaults to "16rem".
• Global attributes are accepted.

Slots

• inner_block (required) - gallery items — wrap each in an <li>.

An aspect-ratio media wrapper (a <figure>).

Set ratio to reserve the box before the asset loads — the frame holds its height so surrounding content never jumps. Provide an accurate alt on the child image; the wrapper is presentational.

Examples

<.media ratio="16/9">
  <img src="/hero.jpg" alt="Team standing in the new office" />
  <:caption>Opening day, 2026.</:caption>
</.media>

Attributes

• ratio (:string) - aspect ratio like "16/9" or "4/3"; reserves space to prevent CLS. Defaults to nil.
• fit (:string) - object-fit for the media child. Defaults to "cover". Must be one of "cover", or "contain".
• rounded (:boolean) - Defaults to true.
• Global attributes are accepted.

Slots

• inner_block (required) - the <img>/<video>/<picture> element.
• caption - renders inside <figcaption>.

A typographic container: constrains line length to a readable measure (--aui-measure) and applies consistent vertical rhythm to arbitrary rich content (headings, paragraphs, lists, tables, code). Style is scoped to the .aui-prose block so it never leaks into surrounding UI.

Examples

<.prose>
  <h2>Getting started</h2>
  <p>Install the library and import the stylesheet…</p>
</.prose>

Attributes

• Global attributes are accepted.

Slots

• inner_block (required)