Heading
<Heading />TailwindCSS ModulesProduction StableSemantic heading component decoupling document outline level (h1–h6) from an independent visual typography scale, engineered for accessible, systematic hierarchy in enterprise SaaS platforms and dense dashboards.
npx coloxo add heading --style coloxo-cssimport { Heading } from '@coloxo/ui';@coloxo/uiBundle: 0.74 KBDesign Tokens:
01 / Visual architecture
1. Level vs Size Decoupling Matrix
Decouple document structure (h1–h6) from visual scale for accessible, flexible enterprise layouts.
| Level (rendered tag) | Default size | Visual treatment & preview | Semantic role | Code example |
|---|---|---|---|---|
| h1 | size="xl" (30px / 38px LH) | System Overview | Page & primary dashboard title. | <Heading level={1}>System Overview</Heading> |
| h2 | size="xl" (30px / 38px LH) | Team Settings | Section header & major feature partitions. | <Heading level={2}>Team Settings</Heading> |
| h3 | size="lg" (24px / 32px LH) | API Credentials | Subsection / Card header in dense layouts. | <Heading level={3}>API Credentials</Heading> |
| h4 | size="md" (20px / 28px LH) | Webhook Activity | Widget / Modal title & dialog headings. | <Heading level={4}>Webhook Activity</Heading> |
| h5 | size="sm" (16px / 24px LH) | Payload Headers | Sub-panel / group heading in telemetry grids. | <Heading level={5}>Payload Headers</Heading> |
| h6 | size="sm" (16px / 24px LH) | AUDIT METADATA | Compact drawer / metadata grouping titles. | <Heading level={6}>AUDIT METADATA</Heading> |
02 / Geometric rhythms
2. Typographic Scale & Metrics
Proportionally locked font-size to line-height ratios engineered for crisp visual hierarchy across all screens.
Sizes sm–2xl
size="sm"Payload Headers
Compact drawers, table group titles, dense metric headers.
size="md"Webhook Activity
Card titles, modal headers, standard widgets.
size="lg"API Credentials
Secondary page sections, split-panel titles.
size="xl"DEFAULT DERIVEDTeam Settings
Primary view titles, settings page headings. Default for h1/h2.
size="2xl"Global Telemetry Cluster
Hero KPI overviews, executive dashboard banner titles.
03 / DOM architecture
3. Semantic HTML Document Outline
Decouple visual styling from document semantics to produce a clean accessibility tree without skipping levels.
Preserving outline while scaling visually
Preserving outline while scaling visually
When building compact widgets or secondary cards inside complex layouts, designers often require small text sizes without disrupting assistive technologies. By specifying level={3} and size="sm", the DOM tree remains fully intact without heading skip violations.
Compact widget title
04 / Sandbox workspace
4. Interactive Live Playground
Real-time property inspector reflecting exact production JSX props, rendered HTML heading tag, and computed CSS tokens.
Props inspector
System Overview
<Heading level={1}> System Overview</Heading>05 / Theme system
5. Enterprise Dark Theme Matrix
High-contrast Dark Mode compliance ([data-cx-theme="dark"]) maintaining WCAG AAA optical legibility across all heading levels.
LEVEL 1 / SIZE="2XL"Global Telemetry Cluster
#F8FAFC (Slate 50)
LEVEL 2 / SIZE="XL"Security Governance
#F1F5F9 (Slate 100)
LEVEL 3 / SIZE="LG"Workload Partitions
#E2E8F0 (Slate 200)
LEVEL 4 / SIZE="MD"Audit Log Stream
#CBD5E1 (Slate 300)
06 / Application patterns
6. Enterprise Layout Compositions
Contextual usage in financial ledgers, audit traces, and high-density telemetry headers.
Active account
Organization / Enterprise CloudBilling & Usage
Review monthly compute quotas, invoice reconciliation, and automated payment instruments.
Linked to Primary Ledger
Manage Invoices →Identity & access policies
ENFORCEDMulti-Factor Authentication
All administrators must verify sessions with FIDO2 or biometric credentials.
Policy Hash:
4de91b72...07 / Compliance & standards
7. Hierarchy & Accessibility (A11Y) Contract
Strict standards governing screen reader document trees, optical ratios, and baseline vertical rhythm.
Enforces a logical document outline tree for JAWS, NVDA, and Apple VoiceOver. Headings must follow strict sequential order without visual trade-offs forcing invalid jumps.
Designers can render compact subheadings (size="sm") without creating invalid h4/h5 semantic skips. Outline integrity remains independent of visual presentation.
Rigid line-height tokens (24px, 28px, 32px, 38px, 44px) prevent multi-line title wrapping collisions in compact flex containers and dense dashboard headers.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| level | 1 | 2 | 3 | 4 | 5 | 6 | 2 | Semantic heading tag (h1–h6). |
| size | "sm" | "md" | "lg" | "xl" | "2xl" | — | Visual scale; defaults from level (xl for h1/h2, lg for h3, md for h4, sm for h5/h6). |
| weight | "regular" | "medium" | "semibold" | "bold" | — | Font weight override. Defaults to bold for xl/2xl, semibold otherwise. |
| tracking | "normal" | "tight" | "tighter" | — | Letter-spacing. Defaults to tighter for 2xl, normal otherwise. |