Illustrative Mathematics® Learn Math for life
Components/Typography

Overline

A typography component for text appearing above a heading title.

done

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

Category

With Heading Title

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

Blog Post

Understanding Typography

Custom Styling

You can apply custom styles using the className prop.

Featured

Import

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

Props

PropTypeDefault
className?
string
-
children
React.ReactNode
-