The Typography primitives provide the core elements for adding and managing text within your project, giving you control over structure and formatting. Options include Text, Rich Text, Paragraph, Headings (H1–H6), and Lists, all located in the Typography dropdown menu.
The Text primitive is rendered as a span by default, providing a flexible way to insert inline text. The tag property can be used to change it to another HTML element, such as p or h1-6, based on your needs.
| Prop | Type | Default | Description |
|---|---|---|---|
tag | select | span | Allows changing the default HTML tag for flexibility. |
text | string | Default Text | Renders the text value. |
Use Rich Text for content that requires formatting, such as paragraphs, links, or bold/italic styles. This primitive doesn’t have a tag prop but allows for rich text content to be inserted or passed programmatically.
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | Default Text | Renders rich text content. |
The Paragraph primitive is rendered as a p tag by default. It is ideal for blocks of text and does not have a tag prop. Customize it for body copy or descriptive text with full styling options.
| Prop | Type | Default | Description |
|---|---|---|---|
tag | select | p | Allows changing the default HTML tag. |
text | string | Paragraph | Renders the paragraph text value. |
Use Headings for structured text elements. Each heading level renders by default as h1, h2, h3, etc., and they come with a tag property, allowing for customization of the heading level based on your content hierarchy.
| Prop | Type | Default | Description |
|---|---|---|---|
tag | select | h1, h2, h3, h4, h5, h6 | Allows changing the heading level. |
text | string | Heading 1 | Renders the heading text value. |
The Ordered List primitive renders as an ol tag. It accepts child elements and comes preconfigured with list items.
| Prop | Type | Default | Description |
|---|---|---|---|
| No properties are available for Ordered List. | — | — | — |
The Unordered List primitive renders as a ul tag. Like the Ordered List, it accepts child elements and inserts list items by default.
| Prop | Type | Default | Description |
|---|---|---|---|
| No properties are available for Unordered List. | — | — | — |
The List Item primitive is rendered as an li element and is typically used within ol or ul lists. By default, it includes a Text primitive set as span.
| Prop | Type | Default | Description |
|---|---|---|---|
| No properties are available for Unordered List. | — | — | — |
The Block Quote primitive renders as a blockquote tag by default. It is ideal for quoting text or displaying callouts in your design.
| Prop | Type | Default | Description |
|---|---|---|---|
tag | select | blockquote | Allows changing the default HTML tag. |
text | string | Blockquote text | Renders the quoted text value. |
The Code primitive renders as a code tag by default. It is useful for displaying inline or block code snippets and can be styled as needed for documentation or technical content.
| Prop | Type | Default | Description |
|---|---|---|---|
tag | select | code | Allows changing the default HTML tag. |
text | string | Code… | Renders the code snippet value. |
All Typography primitives can be fully customized through the Style Panel, Global Styles, and Selectors.