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
Default
The quick brown fox jumps over the lazy dog.
Muted
This is secondary text that is less prominent.
Lead
This is lead text, usually for introductions.
Large
This is slightly larger text.
Small
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). |