Overview

The Overline component is a typography component used to render text that appears above a heading title. It comes with preset styles (font size, weight, color) that are optimized for this specific use case. It is typically used to provide extra context or categorization.

This component is designed to be used as a sibling to HeadingTitle within a HeadingWrapper, which ensures correct spacing and layout.

Examples

Basic Usage

With Heading Title

The most common usage is pairing an Overline with a HeadingTitle.

Custom Styling

You can apply custom styles using the className prop.

Import

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

Props