# `LineaUI.Components.Typography`
[🔗](https://github.com/devaction-labs/linea_ui/blob/v0.1.1/lib/linea_ui/components/typography.ex#L1)

LineOne's typography: headings in every level and weight, display headings, gradient and
decorated text, decorated links, inline code and keyboard keys.

    <.heading level={1}>Heading H1</.heading>
    <.heading level={3} weight="light" color="info">Light H3</.heading>
    <.heading display={2}>Display 2</.heading>

    <.text size="lg" decoration="underline">Underlined</.text>
    <.text as="span" size="lg" weight="semibold" gradient="sky-blue">Gradient</.text>
    <.text_link href="#" decoration_color="info" decoration_style="wavy">Tattooine</.text_link>

    Press <.kbd>Ctrl</.kbd> + <.kbd>K</.kbd>, or run <.inline_code>mix test</.inline_code>.

# `heading`

Renders a heading, `<h1>` to `<h6>`, sized as LineOne's. `display` renders LineOne's display
headings (an `<h1>` unless `level` says otherwise) from 1, the largest, to 5.

    <.heading level={3} weight="semibold" color="primary">Orders</.heading>
    <.heading display={1}>Welcome</.heading>

## Attributes

* `level` (`:integer`) - Defaults to `nil`.Must be one of `nil`, `1`, `2`, `3`, `4`, `5`, or `6`.
* `display` (`:integer`) - Defaults to `nil`.Must be one of `nil`, `1`, `2`, `3`, `4`, or `5`.
* `weight` (`:string`) - Defaults to `"normal"`. Must be one of `"normal"`, `"light"`, `"medium"`, `"semibold"`, or `"bold"`.
* `color` (`:string`) - Defaults to `"default"`. Must be one of `"default"`, `"error"`, `"info"`, `"muted"`, `"neutral"`, `"primary"`, `"secondary"`, `"success"`, or `"warning"`.
* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

# `inline_code`

Renders code inside running text, the way LineOne's pages show class names.

    Use the <.inline_code>rounded-full</.inline_code> utility.

## Attributes

* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

# `kbd`

Renders a keyboard key.

    <.kbd>Ctrl</.kbd> + <.kbd>K</.kbd>

## Attributes

* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

# `text`

Renders a run of text: a paragraph unless `as` says otherwise.

    <.text size="lg" weight="semibold" gradient="amber-orange">Hello</.text>

## Attributes

* `as` (`:string`) - Defaults to `"p"`. Must be one of `"p"`, `"span"`, `"div"`, `"strong"`, `"em"`, or `"small"`.
* `size` (`:string`) - Defaults to `"inherit"`. Must be one of `"inherit"`, `"xs"`, `"xs-plus"`, `"sm"`, `"base"`, `"lg"`, or `"xl"`.
* `weight` (`:string`) - Defaults to `"normal"`. Must be one of `"normal"`, `"light"`, `"medium"`, `"semibold"`, or `"bold"`.
* `color` (`:string`) - Defaults to `"default"`. Must be one of `"default"`, `"error"`, `"info"`, `"muted"`, `"neutral"`, `"primary"`, `"secondary"`, `"success"`, or `"warning"`.
* `gradient` (`:string`) - Paints the text with one of LineOne's gradients. Defaults to `nil`. Must be one of `nil`, `"sky-blue"`, `"green-fuchsia"`, `"fuchsia-pink"`, `"amber-orange"`, or `"purple-indigo"`.
* `decoration` (`:string`) - Defaults to `nil`.Must be one of `nil`, `"underline"`, `"overline"`, `"line-through"`, or `"none"`.
* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted.
## Slots

* `inner_block` (required)

# `text_link`

Renders a link inside running text, underlined in a theme color and style as LineOne's text
decoration examples.

    <.text_link navigate={~p"/about"} decoration_color="secondary" decoration_style="dotted">
      About us
    </.text_link>

## Attributes

* `decoration_color` (`:string`) - Defaults to `"current"`. Must be one of `"current"`, `"primary"`, `"secondary"`, `"info"`, `"success"`, `"warning"`, or `"error"`.
* `decoration_style` (`:string`) - Defaults to `"solid"`. Must be one of `"solid"`, `"wavy"`, `"double"`, `"dotted"`, or `"dashed"`.
* `class` (`:any`) - Defaults to `nil`.
* Global attributes are accepted. Supports all globals plus: `["href", "navigate", "patch", "method", "download"]`.
## Slots

* `inner_block` (required)

---

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