Layout component

Typography

Apply consistent readable responsive typography, widths, columns, spacing, and editorial hierarchy.

6 props1 slots0 outputsTheme readyResponsive

Interactive playground

Configure Typography

Change any prop and inspect the server-rendered component immediately.

Live preview

Readable page content

Typography creates consistent hierarchy and comfortable reading rhythm.

Clear headings
Readable paragraphs
Consistent lists

Component code

<Typography>
  <div class="showcase-slot"><span class="icon-[lucide--layers-3] size-4" aria-hidden="true"></span><span>Composable content area.</span></div>
</Typography>

Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Readable content typography

Apply consistent typography to headings, paragraphs, lists, and inline content.

Live preview

Readable page content

Typography creates consistent hierarchy and comfortable reading rhythm.

Clear headings
Readable paragraphs
Consistent lists

Component usage.wrn

<Typography>
  <div class="showcase-typography"><h2>Readable page content</h2><p>Typography creates consistent hierarchy and comfortable reading rhythm.</p><ul><li>Clear headings</li><li>Readable paragraphs</li><li>Consistent lists</li></ul></div>
</Typography>

Compact

Compact documentation typography

Use reduced spacing in reference pages and dense product help.

Live preview

Compact reference

Focused content with reduced spacing.

Component usage.wrn

<Typography
  size="compact"
  maxWidth="compact">
  <div class="showcase-typography"><h3>Compact reference</h3><p>Focused content with reduced spacing.</p></div>
</Typography>

Advanced

Wide editorial typography

Use wider content and multiple columns for editorial or policy content.

Live preview

Long-form public information

Structured editorial content can use a wider two-column layout on large screens.

Responsive behavior returns content to one column on smaller screens.

Component usage.wrn

<Typography
  size="spacious"
  gap="xl"
  maxWidth="wide">
  <div class="showcase-typography"><h2>Long-form public information</h2><p>Structured editorial content can use a wider two-column layout on large screens.</p><p>Responsive behavior returns content to one column on smaller screens.</p></div>
</Typography>

Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

Prop	Type	Default	Required
`size`	string	`"default"`	No
`color`	string	`"primary"`	No
`columns`	number	`2`	No
`gap`	string	`"md"`	No
`maxWidth`	string	`"xl"`	No
`class`	string	`""`	No