CinderUI.Components.Typography (cinder_ui v0.1.0)

Copy Markdown View Source

Typography recipes for semantic headings and text treatments.

typography/1 is imported by use CinderUI by default. Named aliases such as <.h1>, <.lead>, and <.inline_code> are available when importing this module directly or by opting in through use CinderUI, typography: true. Aliases are opt-in because short names like h1/1 are likely to conflict with application components.

View live Typography examples and component docs.

Summary

Functions

blockquote(assigns)

Renders the :blockquote typography variant.

h1(assigns)

Renders the :h1 typography variant.

h2(assigns)

Renders the :h2 typography variant.

h3(assigns)

Renders the :h3 typography variant.

h4(assigns)

Renders the :h4 typography variant.

inline_code(assigns)

Renders the :inline_code typography variant.

large(assigns)

Renders the :large typography variant.

lead(assigns)

Renders the :lead typography variant.

list(assigns)

Renders the :list typography variant.

muted(assigns)

Renders the :muted typography variant.

p(assigns)

Renders the :p typography variant.

small(assigns)

Renders the :small typography variant.

typography(assigns)

Shadcn-inspired typography recipe for semantic headings and text treatments.

Functions

blockquote(assigns)

Renders the :blockquote typography variant.

Attributes

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

Slots

  • inner_block (required)

h1(assigns)

Renders the :h1 typography variant.

Attributes

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

Slots

  • inner_block (required)

h2(assigns)

Renders the :h2 typography variant.

Attributes

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

Slots

  • inner_block (required)

h3(assigns)

Renders the :h3 typography variant.

Attributes

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

Slots

  • inner_block (required)

h4(assigns)

Renders the :h4 typography variant.

Attributes

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

Slots

  • inner_block (required)

inline_code(assigns)

Renders the :inline_code typography variant.

Attributes

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

Slots

  • inner_block (required)

large(assigns)

Renders the :large typography variant.

Attributes

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

Slots

  • inner_block (required)

lead(assigns)

Renders the :lead typography variant.

Attributes

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

Slots

  • inner_block (required)

list(assigns)

Renders the :list typography variant.

Attributes

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

Slots

  • inner_block (required)

muted(assigns)

Renders the :muted typography variant.

Attributes

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

Slots

  • inner_block (required)

p(assigns)

Renders the :p typography variant.

Attributes

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

Slots

  • inner_block (required)

small(assigns)

Renders the :small typography variant.

Attributes

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

Slots

  • inner_block (required)

typography(assigns)

Shadcn-inspired typography recipe for semantic headings and text treatments.

typography/1 is intentionally small: it applies token-based Tailwind classes to a single semantic element and does not style arbitrary prose descendants. Use as when the visual treatment should render as a different HTML tag.

Attributes

  • variant: :h1 | :h2 | :h3 | :h4 | :p | :lead | :large | :small | :muted | :blockquote | :inline_code | :list

  • as: optional HTML tag override for typography-safe text tags

Examples

heex title="Article heading stack" align="full" vrt <div class="max-w-2xl"> <.typography variant={:h1}>Realtime payments need boring interfaces</.typography> <.typography variant={:lead} class="mt-4"> Operators need clear hierarchy, calm defaults, and text that survives dense workflows. </.typography> <.typography> Use typography recipes when component copy needs consistent rhythm without introducing a rich text renderer or client-side dependency. </.typography> </div>

heex title="Inline UI copy" align="full" <div class="max-w-md space-y-3"> <.typography variant={:h3}>Workspace limits</.typography> <.typography variant={:muted}> API keys expire after <.typography variant={:inline_code}>90d</.typography>. </.typography> <.typography variant={:small} as="p">Last updated by the billing service.</.typography> </div>

heex title="List recipe" align="full" <.typography variant={:list}> <li>Keep headings semantic.</li> <li>Use tokens like <.typography variant={:inline_code}>text-muted-foreground</.typography>.</li> <li>Reach for component slots before custom wrappers.</li> </.typography>

## Screenshot

typography/1 screenshot

View live examples and full component docs.

## Attributes

variant (:atom) - Defaults to :p. Must be one of :h1, :h2, :h3, :h4, :p, :lead, :large, :small, :muted, :blockquote, :inline_code, or :list. as (:string) - Defaults to nil.Must be one of nil, "h1", "h2", "h3", "h4", "p", "div", "small", "blockquote", "code", "ul", "h5", "h6", "ol", or "span". class (:string) - Defaults to nil. Global attributes are accepted. ## Slots

* inner_block (required)