Heading

Copy for LLM

The Heading component provides an accessible way to create semantically correct heading elements with consistent styling.

Import

import { Heading } from "@cfa/react-core";

Live Editor

Guidelines

When to use

Heading is for titles and section headings.

Do

Choose heading level by document outline, not visual size.
Use exactly one H1 per page, phrased as the task or destination.
Use H2 for major page sections. Use H3 for subsections.
Keep heading text concise. Long titles can break their container.
For an eyebrow above a heading, use brand-red color and 25 characters or fewer. Use it on marketing surfaces and section intros.

Avoid

Using Heading for body copy or for elements that are not titles or section headings.
Leaving a dangling heading with no content after it.

Examples

Semantic Heading Levels

You can use the level prop to ensure the heading has the correct semantic level (h1-h4) while maintaining the visual style you want by using the variant prop .

Variants

The variant prop applies different styles to the Heading component, allowing you to choose from various typography styles defined in the Design System.

Heading Variants

The Heading component supports multiple variants based on Chick-fil-A’s typography system, including headline, subtitle, and overline styles.

Subtitle Variants

Subtitle variants use a different font family and are designed for supporting content.

Overline Variants

Overline variants are typically used for labels or short descriptive text that sits above other content.