typography
Heading
Semantic h1–h6 element with configurable visual size, weight, and alignment. Decouples visual appearance from semantic level.
Import
import { Heading } from '@stella-ds/react'Props
| Prop | Type | Default | Description |
|---|---|---|---|
| level | 1 | 2 | 3 | 4 | 5 | 6 | 2 | Semantic heading level (determines rendered element) |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | maps from level | Visual size override |
| weight | 'normal' | 'medium' | 'semibold' | 'bold' | 'bold' | Font weight |
| align | 'left' | 'center' | 'right' | 'left' | Text alignment |
| asChild | boolean | false | Radix Slot pattern |
Preview
Heading 1
Heading 2
Heading 3
Heading 4
Examples
Basic
<Heading level={1} size="3xl">Page Title</Heading>
<Heading level={2} align="center" weight="semibold">Section Header</Heading>