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.
variant | tag |
|---|---|
h1 .. h6 | h1..h6 |
subtitle1, subtitle2, body1, body2 | p |
caption, overline, button | span |
code | code |
Summary
Functions
Renders text styled by the type scale. See the module doc.
Functions
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 totrue.class(:any) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)