Renders an <abbr> with a dotted underline and browser tooltip.

Examples

<.abbr title="HyperText Markup Language">HTML</.abbr>

Attributes

• title (:string) (required) - Full form of the abbreviation, shown as browser tooltip.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a styled blockquote with an optional citation footer.

Examples

<.blockquote>To be or not to be.</.blockquote>
<.blockquote cite="William Shakespeare">To be or not to be.</.blockquote>

Attributes

• cite (:string) - Citation source shown in a <cite> footer below the quote. Defaults to nil.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a caption for figures or images.

Examples

<figure>
  <img src="/chart.png" alt="Sales chart" />
  <.caption>Figure 1: Monthly sales data</.caption>
</figure>

Attributes

• as (:atom) - HTML element to render. Defaults to :figcaption. Must be one of :figcaption, :span, or :p.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a multi-line code block with optional language badge.

Examples

<.code_block language="elixir">
  def hello, do: :world
</.code_block>

Attributes

• language (:string) - Language label shown as a badge in the top-right corner. Defaults to nil.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders large hero/display text beyond the standard heading scale.

Examples

<.display size={:"6xl"} align={:center}>Welcome</.display>
<.display fluid={true}>Fluid Hero</.display>

Attributes

• size (:atom) - Hero text size. 5xl=3rem, 6xl=3.75rem, 7xl=4.5rem. Defaults to :"5xl". Must be one of :"5xl", :"6xl", or :"7xl".
• align (:atom) - Defaults to :start. Must be one of :start, :center, or :end.
• weight (:atom) - Defaults to :semibold. Must be one of :normal, :medium, or :semibold.
• fluid (:boolean) - When true, uses CSS custom property fluid font sizes that scale with viewport. Defaults to false.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders gradient-clipped text using bg-clip-text text-transparent.

Must be a <span> (inline) for the gradient to render correctly.

Examples

<.gradient_text>Hello World</.gradient_text>
<.gradient_text from={:primary} to={:destructive} angle={:tr}>Error</.gradient_text>

Attributes

• from (:atom) - Defaults to :primary. Must be one of :primary, :secondary, :destructive, or :muted.
• to (:atom) - Defaults to :secondary. Must be one of :primary, :secondary, :destructive, or :muted.
• angle (:atom) - Gradient direction. :r = left-to-right, :tr = bottom-left-to-top-right, etc. Defaults to :r. Must be one of :r, :l, :t, :b, :tr, :tl, :br, or :bl.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a semantic heading (<h1>–<h6>) with automatic sizing per level.

Examples

<.heading level={1}>Page Title</.heading>
<.heading level={2} align={:center}>Section</.heading>
<.heading level={3} size={:"2xl"}>Custom Size</.heading>
<.heading level={1} fluid={true}>Fluid Title</.heading>

Attributes

• level (:integer) - Semantic heading level (1–6). Determines both the HTML element and default size. Defaults to 2. Must be one of 1, 2, 3, 4, 5, or 6.
• size (:atom) - Override the text size. :auto uses level-specific defaults. Defaults to :auto. Must be one of :auto, :xs, :sm, :base, :lg, :xl, :"2xl", :"3xl", or :"4xl".
• align (:atom) - Text alignment. Defaults to :start. Must be one of :start, :center, or :end.
• tracking (:atom) - Letter spacing. Defaults to :tight. Must be one of :tight, :normal, or :wide.
• fluid (:boolean) - When true, uses CSS custom property fluid font sizes that scale with viewport. Defaults to false.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders an inline monospace code span.

Examples

Use <.inline_code>mix phia.install</.inline_code> to set up.

Attributes

• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a lead paragraph — larger introductory text above main content.

Examples

<.lead>An introductory sentence that summarizes the section.</.lead>

Attributes

• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a <mark> element for highlighted text.

Note: yellow/green/blue colors use direct Tailwind color utilities (not semantic tokens) since no highlight-color semantic tokens exist.

Examples

<.mark>important</.mark>
<.mark color={:yellow}>highlighted</.mark>

Attributes

• color (:atom) - Highlight color. :default uses primary/20; others use direct color utilities. Defaults to :default. Must be one of :default, :yellow, :green, :blue, or :red.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders an ordered list with typographic spacing.

Examples

<.ordered_list>
  <li>First step</li>
  <li>Second step</li>
</.ordered_list>

<.ordered_list variant={:roman}>
  <li>Part I</li>
</.ordered_list>

Attributes

• variant (:atom) - Defaults to :decimal. Must be one of :decimal, :alpha, or :roman.
• spacing (:atom) - Defaults to :base. Must be one of :sm, or :base.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders an uppercase, tracking-widest label for categories or section tags.

Examples

<.overline>Category</.overline>

Attributes

• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a body paragraph with typographic rhythm.

Examples

<.paragraph>First paragraph.</.paragraph>
<.paragraph size={:lg}>Large paragraph.</.paragraph>
<.paragraph fluid={true}>Fluid paragraph.</.paragraph>

Attributes

• size (:atom) - Defaults to :base. Must be one of :sm, :base, or :lg.
• fluid (:boolean) - When true, uses CSS custom property fluid font sizes that scale with viewport. Defaults to false.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a prose container that applies typographic rhythm to child HTML.

Uses Tailwind child selectors — no @tailwindcss/typography plugin required.

Examples

<.prose>
  <h1>Article Title</h1>
  <p>Introduction paragraph.</p>
  <h2>Section</h2>
  <p>Section content.</p>
  <ul><li>List item</li></ul>
</.prose>

Attributes

• size (:atom) - Base font size for all child text. Defaults to :base. Must be one of :sm, :base, :lg, or :xl.
• invert (:boolean) - Reduce text opacity for use on dark or coloured backgrounds. Defaults to false.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders an unordered list with typographic spacing.

Examples

<.prose_list>
  <li>First item</li>
  <li>Second item</li>
</.prose_list>

<.prose_list variant={:none} spacing={:sm}>
  <li>Compact item</li>
</.prose_list>

Attributes

• variant (:atom) - Defaults to :disc. Must be one of :disc, :circle, or :none.
• spacing (:atom) - Defaults to :base. Must be one of :sm, or :base.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Polymorphic text atom. Renders as span, p, div, or label.

Examples

<.text>Default span</.text>
<.text as={:p} size={:base} color={:muted}>Muted paragraph</.text>
<.text as={:label} weight={:semibold}>Form Label</.text>
<.text truncate={true} class="max-w-xs">Long truncated text</.text>

Attributes

• as (:atom) - HTML element to render. Defaults to :span. Must be one of :span, :p, :div, or :label.
• size (:atom) - Defaults to :sm. Must be one of :xs, :sm, :base, :lg, or :xl.
• weight (:atom) - Defaults to :normal. Must be one of :normal, :medium, or :semibold.
• color (:atom) - Defaults to :default. Must be one of :default, :muted, :primary, or :destructive.
• align (:atom) - Defaults to :start. Must be one of :start, :center, or :end.
• truncate (:boolean) - Defaults to false.
• italic (:boolean) - Defaults to false.
• underline (:boolean) - Defaults to false.
• strikethrough (:boolean) - Defaults to false.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a semantic anchor with focus and hover styles.

Examples

<.text_link href="/docs">Documentation</.text_link>
<.text_link href="https://example.com" external={true}>External</.text_link>
<.text_link href="/about" variant={:muted}>About</.text_link>

Attributes

• href (:string) (required)
• external (:boolean) - When true, adds target=_blank and rel=noopener noreferrer. Defaults to false.
• variant (:atom) - Defaults to :default. Must be one of :default, or :muted.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Renders a paragraph clamped to N lines with overflow ellipsis.

Examples

<.truncated_text lines={3}>
  Long text that will be clamped to three lines...
</.truncated_text>

Attributes

• lines (:integer) - Maximum number of lines before overflow is clipped. Defaults to 2. Must be one of 1, 2, 3, 4, 5, or 6.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)