Heading

Semantic heading component with size variants

Installation

pnpm add @corew500/ui

import { Heading } from "@corew500/ui/heading"

<Heading>Content</Heading>

CMSPayload CMS Integration

This component supports CMS-driven content via @corew500/cms-payload.

CMS FieldsEN

Content

Heading Level

Visual Size Override

Color Intent

Alignment

This simulates how a content editor configures headings in Payload CMS. Switch locales to see localized content.

Prop	Type	Default	Description
`level*`	enum	—	The semantic heading level (1-6). Determines HTML element and default visual size. - Level 1 renders `<h1>` with size 4xl (page titles) - Level 2 renders `<h2>` with size 3xl (section headings) - Level 3 renders `<h3>` with size 2xl (subsection headings) - Level 4 renders `<h4>` with size xl (card titles, group headings) - Level 5 renders `<h5>` with size lg (minor headings) - Level 6 renders `<h6>` with size base (small headings, overlines)
`size`	enum	`Derived from level (level 1 = "4xl", level 2 = "3xl", etc.)`	Override the visual size while keeping semantic level. Useful for visually demoting a heading without breaking document structure.
`intent`	enum	`"default"`	Color intent for the heading. - `default`: Standard foreground color - `muted`: Subdued muted-foreground color - `destructive`: Destructive/error color
`align`	enum	—	Text alignment. - `left`: Left-aligned text - `center`: Center-aligned text - `right`: Right-aligned text