Migration Information

For teams migrating from the V1 to V2 component, please refer to the migration guide for changes to the component.

Component Guide

import { Heading } from '@uhg-abyss/web/ui/Heading';

Usage

The Heading component is used to create headings in your application. It supports different levels, sizes, and styles based on the brand (Optum or UHC). It follows our Typography guidelines to ensure consistency across the application.

Level

If you want to set the heading level, you can provide a level prop. This will allow you to set a specific heading level (1-6). The default is 1.

Size

The size prop controls the visual size of the heading typography.

• Optum: 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | 'xxs'

The default is xl.

Color

Use the color prop to set the color of the text. This prop accepts any valid CSS color identifier (RGB, HSL, named color, etc.) as well as Abyss color tokens. The default value is '$web.semantic.color.text.content.primary'.

Note: Text colors must meet the minimum 3:1 for large text as per WCAG 2.1 guidelines.

Text alignment

Use the textAlign prop to control the horizontal alignment of the heading text. Available values are 'left', 'center', and 'right'. The default alignment is 'left'.

Nesting heading levels

Using Heading.Level

Nesting headers with the Heading.Level subcomponent allows users to have multiple levels of headers, without having to directly tag each level of <h*> tags. It also automatically adjusts the size.

Using level and size

Alternatively, users can set the level and size props on a Heading to achieve the same effect.

Nesting example

Nested headers can be combined together with text to organize sections and create a seamless document experience.

Heading Props

Name	Type	Default	Required	Description
children	React.ReactNode	-		The heading content to display
className	string	-	-	CSS class name to apply to each element within the component
color	string	'$web.semantic.color.text.content.primary'	-	The color of the heading
css	Abyss.CSSProperties | Partial<Record<`abyss-${T}`, Abyss.CSSProperties>>	-	-	Object containing CSS styling to apply; uses the classes listed in the "Integration" tab of the component's documentation See CSS Prop Styling for more information
data-testid	string	-	-	Suffix used to create a unique ID used for automated testing See Component Testing for more information
disableDefaultProviderProps	boolean	false	-	If set to true, the component will not use the DefaultPropsProvider values. If you aren’t using the DefaultPropsProvider, this prop can be ignored.
display	false | true	-	-	Whether to use Display typography (UHC only) Display mode not available for Optum
level	1 | 2 | 3 | 4 | 5 | 6	1	-	What level heading to display
serif	boolean | true	false	-	Whether the heading should be serif or sans serif (UHC only) Serif not available for Optum
size	UHCHeadingSize | UHCDisplaySize | OptumHeadingSize	'xl'	-	The visual size of the heading The visual size of the heading (limited for display mode)
textAlign	"center" | "left" | "right"	-	-	The text alignment of the heading

Below are the link(s) to the relevant GitHub type files:

Abyss.d.ts

Heading.types.ts

Heading Classes

Class Name	Description
.abyss-heading-root	The heading root element