# `PhiaUi.Components.Typography`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/typography/typography.ex#L1)

Typography primitives for PhiaUI — 18 components covering headings, text,
code, lists, and prose containers.

All components use system fonts (`font-sans` / `font-mono`) — no Google Fonts.
Max weight is `font-semibold`; max line-height is `leading-relaxed`.

## Components

- `heading/1` — h1–h6 with semantic level prop
- `display/1` — large hero text (5xl–7xl)
- `text/1` — polymorphic inline/block text atom (span/p/div/label)
- `paragraph/1` — body paragraph with typographic rhythm
- `lead/1` — introductory lead paragraph
- `blockquote/1` — styled blockquote with optional cite
- `inline_code/1` — inline monospace code span
- `code_block/1` — multi-line code block with optional language label
- `mark/1` — highlighted mark element
- `text_link/1` — semantic anchor with hover styles
- `overline/1` — uppercase tracking-widest label
- `caption/1` — figure caption or muted annotation
- `abbr/1` — abbreviation with browser tooltip
- `prose_list/1` — unordered list with variant styles
- `ordered_list/1` — ordered list with variant styles
- `gradient_text/1` — gradient-clipped text span
- `truncated_text/1` — line-clamped paragraph
- `prose/1` — article container with child element rhythm

# `abbr`

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)

# `blockquote`

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)

# `caption`

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)

# `code_block`

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)

# `display`

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)

# `gradient_text`

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)

# `heading`

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)

# `inline_code`

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)

# `lead`

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)

# `mark`

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)

# `ordered_list`

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)

# `overline`

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)

# `paragraph`

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)

# `prose`

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)

# `prose_list`

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)

# `text`

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)

# `text_link`

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)

# `truncated_text`

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)

---

*Consult [api-reference.md](api-reference.md) for complete listing*