Section Heading
Installation
pnpm add @corew500/uiUsage
import { SectionHeading } from "@corew500/ui/section-heading"
<SectionHeading>Content</SectionHeading>Variants
sectionHeadingVariants
| Axis | Values | Default |
|---|---|---|
| align | leftcenter | center |
| size | smdefaultlg | default |
CMS Integration
Loading...
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title* | string | — | Section title (required) |
| description | string | — | Optional description text |
| badge | SectionHeadingBadge | — | Optional badge above the title |
| level | enum | 2 | Heading level for semantic HTML |
| align | enum | center | Text alignment |
| size | enum | default | Size variant affecting title size |
Accessibility
Focus Management
- - Uses semantic heading levels (h2-h4) for proper document outline
Screen Readers
- Badge icons use aria-hidden="true" as they are decorative
Additional
- Heading level should match document hierarchy
Localization
Translatable Content
- - All text content is provided via props
- Pass pre-translated strings for i18n support