Overview

The HeadingTitle component is a versatile typography component used to render headings with consistent styling across the application. It supports semantic level, visual size, and color. It serves as the main body of a heading group, typically positioned between an Overline (above) and a Subheading (below).

This component is typically used as a child of HeadingWrapper, which provides consistent spacing and layout for heading group components: Overline, HeadingTitle, and Subheading.

Examples

Basic Usage

By default, headings use size 2xl and color neutral.

Levels

The level prop determines the semantic HTML element that is rendered on the page. For example, level="1" renders an <h1> tag, level="2" renders an <h2> tag, and so on. This ensures proper document structure and accessibility while allowing visual style to be controlled independently via the size prop.

Sizes

Available sizes range from xs to 2xl, allowing for visual hierarchy independent of the semantic heading level.

Colors

Heading color can be set to neutral or primary. Use neutral for standard section headings (theme-aware default text). Use primary for brand-accent headings.

On dark section backgrounds (for example color-brand-teal-300), wrap headings in PageSection. The section sets data-theming="dark", so neutral uses on-dark default text and primary uses the lighter brand primary token.

Custom Styling

You can apply custom styles using the className prop.

Import

import { HeadingTitle } from '@im/integral/components/styled';

Props