Heading
Semantic headings with visual size control. Use semantic level (h1-h6) for structure, size modifier for visual styling.
Sizes
Heading 4xl
Heading 3xl
Heading 2xl
Heading xl
Heading lg
Heading md
Heading sm
Base
| Class | Description |
|---|---|
.ui-heading | Base class |
Size
| Class | Value |
|---|---|
.ui-heading--4xl | 4xl |
.ui-heading--3xl | 3xl |
.ui-heading--2xl | 2xl |
.ui-heading--xl | xl |
.ui-heading--lg | lg |
.ui-heading--md | md |
.ui-heading--sm | sm |
Override these CSS custom properties to customize the component.
| Token | Default | Description |
|---|---|---|
--ui-heading-font-size |
var(--ui-font-size-xl) |
Font size |
--ui-heading-line-height |
var(--ui-line-height-xl) |
Line height |
--ui-heading-weight |
var(--ui-font-weight-bold) |
Weight |
--ui-heading-color |
var(--ui-color-text) |
Text color |
--ui-heading-font-size-4xl |
var(--ui-font-size-4xl) |
Font size 4xl |
--ui-heading-line-height-4xl |
var(--ui-line-height-4xl) |
Line height 4xl |
--ui-heading-font-size-3xl |
var(--ui-font-size-3xl) |
Font size 3xl |
--ui-heading-line-height-3xl |
var(--ui-line-height-3xl) |
Line height 3xl |
--ui-heading-font-size-2xl |
var(--ui-font-size-2xl) |
Font size 2xl |
--ui-heading-line-height-2xl |
var(--ui-line-height-2xl) |
Line height 2xl |
--ui-heading-font-size-xl |
var(--ui-font-size-xl) |
Font size at extra-large size |
--ui-heading-line-height-xl |
var(--ui-line-height-xl) |
Line height at extra-large size |
--ui-heading-font-size-lg |
var(--ui-font-size-lg) |
Font size at large size |
--ui-heading-line-height-lg |
var(--ui-line-height-lg) |
Line height at large size |
--ui-heading-font-size-md |
var(--ui-font-size-md) |
Font size at medium size |
--ui-heading-line-height-md |
var(--ui-line-height-tight-md) |
Line height at medium size |
--ui-heading-font-size-sm |
var(--ui-font-size-sm) |
Font size at small size |
--ui-heading-line-height-sm |
var(--ui-line-height-tight-sm) |
Line height at small size |
Decoupled Sizing
h2 styled as 3xl
h1 styled as lg
<!-- Use any size with any semantic level. -->
<h2 class="ui-heading ui-heading--3xl">h2 styled as 3xl</h2>
<h1 class="ui-heading ui-heading--lg">h1 styled as lg</h1>With Text Utilities
Muted heading
Primary heading
<!-- Combine with text utilities for color and other styles. -->
<h2 class="ui-heading ui-heading--2xl ui-text-muted">Muted heading</h2>
<h2 class="ui-heading ui-heading--2xl ui-text-primary">Primary heading</h2>