Overview

The HeadingTitle component is a versatile typography component used to render headings with consistent styling across the application. 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

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.

Custom Styling

You can apply custom styles using the className prop.

Import

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

Props