typography
Heading
h1〜h6 のセマンティックな見出し要素。見た目のサイズ・ウェイト・配置を意味レベルと独立して設定可能。
インポート
import { Heading } from '@stella-ds/react'Props
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
| 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
使用例
Basic
<Heading level={1} size="3xl">Page Title</Heading>
<Heading level={2} align="center" weight="semibold">Section Header</Heading>