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.
Props
Name
Default
Description
type
TypographyType.Default
The typography type determining spacing. Options: Default, Data, Critical.
children
required
The content to display. Can include text, lists, paragraphs, or other React nodes.
Basic Typography
Use for standard text content with proper spacing.
Typography with Lists
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.
Unordered Lists
Use for bulleted lists.
Ordered Lists
Use for numbered lists.
Nested Lists
Create hierarchical list structures.
Typography with Mixed Content
Combine text, lists, and other elements.
Typography Types
Control spacing based on content type.
Default Type
Use for standard content with regular spacing (default).
Default type uses larger gap spacing (gap: 1) between elements for comfortable reading.
Data Type
Use for data-heavy content with tighter spacing.
Data type uses reduced gap spacing (gap: 0.5) for denser information display.
Critical Type
Use for critical information with tighter spacing.
Critical type uses reduced gap spacing (gap: 0.5) for focused, important content.
Rich Text Content
Display formatted text with proper structure.
Multi-Paragraph Content
Use for longer text content with multiple paragraphs.
Markdown Content
Wrap markdown-rendered content for proper styling.
The Typography component applies proper list styling and spacing to markdown-generated HTML.
Lists with Text Components
Combine lists with Text components for styled list items.