Typography
Overview
Section titled “Overview”Typography is one component: Variant picks both the default semantic element and its
type-scale class set (H1-H4, P, Blockquote, List, InlineCode/Code, Lead,
Large, Small, Muted), and As overrides the rendered element while keeping the
variant’s classes. Because the rendered tag is dynamic, the component builds it through
RenderTreeBuilder rather than fixed markup. It is purely visual: the correct element
with no added ARIA.
Discrepancy: the docs site page (TypographyPage.razor) describes these as “plain
Tailwind utility classes; copy them onto your markup, no component required,” but
ZitsTypography.razor is a real component (registered in registry/registry.json as
typography, installable via navius add typography). This manifest documents the
component as it exists in source.
Install
Section titled “Install”navius add typography --to ./src/MyApp --namespace MyApp.Ui@using Zits.Ui.Components
<ZitsTypography Variant="H1">Page title</ZitsTypography><ZitsTypography Variant="Lead">A supporting lede paragraph.</ZitsTypography>Parts and props
Section titled “Parts and props”Typography is a single element with no part tree.
| Prop | Type | Default | Description |
|---|---|---|---|
Variant |
string |
"P" |
H1 | H2 | H3 | H4 | P | Blockquote | List | InlineCode/Code | Lead | Large | Small | Muted. Selects both the default element and the Tailwind type-scale class set. |
As |
string? |
null |
Overrides the rendered element (e.g. "span"); defaults to the variant’s semantic tag. |
Styling surface
Section titled “Styling surface”Attributes is merged with the variant’s class set via Cn.Class, with the caller’s
class applied last so it wins the duplicate-key override against any splatted class.
| Parameter | Values |
|---|---|
Variant |
H1 · H2 · H3 · H4 · P · Blockquote · List · InlineCode/Code · Lead · Large · Small · Muted |
Data attribute hooks
Section titled “Data attribute hooks”| Part | Attribute | Description |
|---|---|---|
| Root | data-navius-typography |
Emitted by the component itself on every render, regardless of variant. |
| Root | data-variant |
Mirrors the Variant parameter value, emitted by the component itself. |
Typography is presentational only: it picks the correct semantic element for the
variant (or the As override) but adds no role or keyboard behavior of its own.