Typography

Typography provides a layout container for structured text content with proper spacing, particularly useful for displaying lists, paragraphs, and formatted content. It wraps text content in a vertical flex container with consistent spacing between elements. It applies proper styling to lists (ordered and unordered) and ensures consistent typography patterns for structured content. The component adjusts spacing based on content type, making it ideal for displaying multi-paragraph text, lists, and mixed content.

Use for standard text content with proper spacing.

Display lists with font-relative indentation and body-text rhythm. ul and ol use 1em inline-start padding and no margin. List items have no inline padding; only the boundaries between sibling items receive --list-item-y-padding, so the first and last items have no outer block padding.

Use for bulleted lists.

Use for numbered lists.

Create hierarchical list structures.

Combine text, lists, and other elements.

Control spacing based on content type.

Use for standard content with regular spacing (default).

Default type uses larger gap spacing (gap: 1) between elements for comfortable reading.

Use for data-heavy content with tighter spacing.

Data type uses reduced gap spacing (gap: 0.5) for denser information display.

Use for critical information with tighter spacing.

Critical type uses reduced gap spacing (gap: 0.5) for focused, important content.

Display formatted text with proper structure.

Use for longer text content with multiple paragraphs.

Wrap markdown-rendered content for proper styling.

The Typography component applies proper list styling and spacing to markdown-generated HTML.

Combine lists with Text components for styled list items.

Display step-by-step instructions or procedures.

Combine ordered and unordered lists.

Create definition-style lists with descriptions.

Structure content with headings and body text.

Display data with tight spacing.

Present critical alerts or warnings.