Eidetic

Heading

Typography
Foundation

Typography patterns for headings and titles. Uses semantic HTML elements with Tailwind utility classes for consistent hierarchy across the design system.

Heading Scale

Full heading hierarchy from h1 to h6

h1 - Page Title

Page Title Heading

h2 - Section Title

Section Title Heading

h3 - Subsection

Subsection Heading

h4 - Card Title

Card Title Heading

h5 - Small Heading

Small Heading

h6 - Label Heading

Label Heading

Display Headings

Extra large headings for hero sections

text-5xl (48px)

Display Heading

text-6xl (60px)

Hero Heading

With Descriptions

Headings paired with supporting text

Account Settings

Manage your account preferences and security settings.

Notification Preferences

Choose how and when you want to be notified about updates.

Card Headers

Heading patterns for cards and panels

Card Title

Brief description of the card content.

Card with Action

View all

Card with an action link in the header.

Section Headers

Headers for page sections

Section with Border

A section header with a bottom border separator.

Section Label

Section with Label

Heading Colors

Color variations for different contexts

Default Heading

Accent Heading

Muted Heading

Usage Patterns

Common heading patterns

// Page title (h1)
<h1 className="text-4xl font-bold text-slate-900">
 Page Title
</h1>


// Section title (h2)
<h2 className="text-2xl font-semibold text-slate-900">
 Section Title
</h2>


// Card title (h3/h4)
<h4 className="text-base font-semibold text-slate-900">
 Card Title
</h4>


// With description
<div>
 <h2 className="text-xl font-semibold text-slate-900">
 Heading
 </h2>
 <p className="mt-1 text-sm text-slate-600">
 Description text
 </p>
</div>


// Section label + heading
<div>
 <p className="text-[12px] font-semibold text-slate-500 uppercase tracking-wide mb-2">
 Section
 </p>
 <h3 className="text-lg font-semibold text-slate-900">
 Heading
 </h3>
</div>


// Display heading for hero
<h1 className="text-5xl font-bold text-slate-900">
 Hero Title
</h1>

Size Reference

Heading sizes mapped to HTML elements

PropTypeDefaultDescription
h1text-4xl (36px)—Page titles, one per page
h2text-3xl (30px)—Major sections
h3text-2xl (24px)—Subsections
h4text-xl (20px)—Card titles, small sections
h5text-lg (18px)—Minor headings
h6text-base (16px)—Label-style headings
Displaytext-5xl/6xl (48-60px)—Hero sections, landing pages

Features

Heading styling capabilities

  • Semantic HTML: Uses proper h1-h6 elements for accessibility
  • Consistent scale: Predefined sizes from text-base to text-6xl
  • Font weights: Semibold and bold options
  • Dark mode: All headings support dark mode
  • Display sizes: Extra large sizes for hero content
  • Flexible patterns: With descriptions, labels, and actions

Related Components

TextCardSeparatorBadge