PhoenixPaper.Typography (PhoenixPaper v0.1.0)

Copy Markdown View Source

Material's type scale (pp_typography/1) — variant picks both the rendered tag and the text classes, in the spirit of MUI's Typography.

<.pp_typography variant="h4">Account settings</.pp_typography>
<.pp_typography variant="body1">Regular paragraph text.</.pp_typography>
<.pp_typography variant="caption">Last updated 2 minutes ago</.pp_typography>
<.pp_typography variant="code">mix phx.new my_app</.pp_typography>

Unlike MUI's Typography, there's no component prop to override the tag independently of variant — HEEx can't parameterize a tag name (see AGENTS.md, "Conditional root tag"), and one attr driving both together keeps this to a single set of :if branches instead of the cross product of every variant with every possible tag. If you need a specific variant's styling on a different element, apply its classes yourself, or ask for the override to be added.

varianttag
h1 .. h6h1..h6
subtitle1, subtitle2, body1, body2p
caption, overline, buttonspan
codecode

Summary

Functions

Renders text styled by the type scale. See the module doc.

Functions

pp_typography(assigns)

Renders text styled by the type scale. See the module doc.

Attributes

  • variant (:string) - Defaults to "body1". Must be one of "h1", "h2", "h3", "h4", "h5", "h6", "subtitle1", "subtitle2", "body1", "body2", "caption", "overline", "button", or "code".
  • paperize (:boolean) - Defaults to true.
  • class (:any) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)