1. Components
  2. Heading

Heading

Semantic heading levels with consistent sizing and color intents.

Demo

Heading Level 1

Heading Level 2

Heading Level 3

Installation

terminal

Usage

The Heading component provides semantic heading levels (H1-H5) with consistent sizing. Use the level prop to set the heading level, and intent for color styling.

Examples

Levels

H1 - Page Title

H2 - Section Title

H3 - Subsection

H4 - Card Title

H5 - Small Heading

Intents

Title intent (default)

Body intent

Muted intent

Primary intent

Secondary intent

Destructive intent

Warning intent

API

PropTypeDescription
level1 | 2 | 3 | 4 | 5Heading level determining the HTML tag (h1-h5) and size.
intenttitle | body | muted | primary | secondary | destructive | warningSemantic color intent for the heading.