Surfaces

Heading

A typographic element that enhances readability and SEO by defining section titles with hierarchical importance.

Description ListSeparator

Basic

This is a standard heading.

The quick brown fox jumps over the lazy dog

Installation

npx shadcn@latest add @intentui/heading

Anatomy

import { Heading } from "@/components/ui/heading"
<>
 <Heading level={1}>The quick brown fox jumps over the lazy dog</Heading>
 <Heading level={2}>The quick brown fox jumps over the lazy dog</Heading>
 <Heading level={3}>The quick brown fox jumps over the lazy dog</Heading>
 <Heading level={4}>The quick brown fox jumps over the lazy dog</Heading>
 <Heading level={5}>The quick brown fox jumps over the lazy dog</Heading>
 <Heading level={6}>The quick brown fox jumps over the lazy dog</Heading>
</>

Manual installation

Heading levels

By default, when a heading is used on a card component, it will default to level 3. Titles range from levels 1 to 4. Each level determines the title type and font size.

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Unlock the full power of
Design Intent UI
Build modern web apps faster with 350+ blocks and polished templates crafted for professionals.
Explore
Description List
Separator