Typography
Typography components ensure consistency across your documentation and application.
Heading
Use the Heading component for page titles and section headers.
import Heading from '~/components/ui/Heading.astro';
<Heading level={1}>Main Title</Heading>
<Heading level={2}>Section Title</Heading>Heading 1
Heading 2
Heading 3
Text
Use the Text component for paragraphs and body copy. It supports multiple variants.
import Text from '~/components/ui/Text.astro';
<Text>Default paragraph text.</Text>
<Text variant="muted">Muted text for secondary information.</Text>Variants
The quick brown fox jumps over the lazy dog.
This is secondary text that is less prominent.
This is lead text, usually for introductions.
This is slightly larger text.
This is small text for captions.
Props
Text
| Prop | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| variant | 'default' \| 'muted' \| 'lead' \| 'large' \| 'small' | 'default' | The semantic style of the text. |
| as | HTMLTag | 'p' | The HTML tag to render (e.g. ‘span’, ‘div’). |
Heading
| Prop | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| level | 1 \| 2 \| 3 \| 4 \| 5 \| 6 | 1 | The heading level (h1-h6). |