Overview
SectionHeading provides consistent section headings with automatic spacing via CSS adjacent sibling selectors. No manual margin classes needed.
Key Features
- Three semantic levels (h2, h3, h4) with appropriate sizing
- Optional icon, description, badge, and divider props
- Subtle variant for form field group labels
- Icon size and color automatic based on level
Level Semantics
Each heading level has a specific purpose. Following these conventions ensures consistent visual hierarchy across all pages.
level={2}Major page sections on background
Use for section headings that appear on the page background, before PageCards. Has built-in top padding (pt-section) for visual separation. Icons are expected.
<SectionHeading level={2} icon={faEye}>Overview</SectionHeading>
<PageCard>...</PageCard>
</div>
level={3}Card headings inside PageCard
Use as the primary heading inside a PageCard. No extra spacing. Icons optional.
<div className="space-y-4">
<SectionHeading level={3}>Card Title</SectionHeading>
<p>Card content...</p>
</div>
</PageCard>
level={4} subtleSubtle labels inside cards
Use with the subtle prop for form field group labels or minor subsections. Uppercase, smaller text style.
Examples
Heading Levels
Three levels for page hierarchy: h2 for major sections, h3 for subsections, h4 for minor subsections.
Level 2: Major Section
Level 3: Subsection
Level 4: Minor Subsection
With Icon
Optional icon to the left of the heading. Size and color are automatic based on level.
Getting Started
Team Members
Advanced Options
AI Features
Subtle variant with icon uses muted color.
With Description
Notification Preferences
Control how and when we contact you
Team Settings
Set up your team and assign roles
Optional description text displayed below the heading in muted text.
With Badge
Optional badge for status indicators like Beta, New, or Pro.
Experimental Features
Advanced Settings
Recently Added
With Divider
Optional divider above, below, or both for visual separation.
Divider Above
Content after heading with top divider.
Divider Below
Content after heading with bottom divider.
Subtle Variant
Smaller uppercase label style for form field groups and card subsections.
Contact Information
Fields for name, email, and phone number would go here.
Address Details
Street, city, state, and zip code fields.
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
level | 2 | 3 | 4 | required | Semantic heading level: 2 (h2), 3 (h3), or 4 (h4) |
description | string | - | Optional subtitle text displayed below the heading |
badge | string | { label, variant } | - | Optional badge: string or object with label and variant |
divider | 'top' | 'bottom' | 'both' | - | Optional divider: 'top', 'bottom', or 'both' |
subtle | boolean | false | Smaller uppercase label-style variant |
icon | IconDefinition | - | Optional icon: size and color automatic based on level |
className | string | - | Additional CSS classes for the container |
Usage
import { SectionHeading, Prose } from '@/ui/components';
import { faBell, faGear } from '@fortawesome/sharp-duotone-light-svg-icons';
// With icon (size/color automatic based on level)
<SectionHeading level={2} icon={faBell} description="Control notifications">
Notification Preferences
</SectionHeading>
// Icon colors by level:
// - Level 2: text-primary (branded)
// - Level 3: text-foreground (matches heading)
// - Level 4: text-foreground (matches heading)
// Parent container controls spacing
<div className="space-y-content">
<SectionHeading level={2} icon={faGear}>
Settings
</SectionHeading>
<Prose>Configure your account settings.</Prose>
</div>
// Subsection with badge
<SectionHeading level={3} badge="Beta">
Experimental Features
</SectionHeading>
// Subtle label style (form field groups)
<SectionHeading level={4} subtle>
Contact Information
</SectionHeading>