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. Available sizes depend on the brand and whether display mode is enabled:
- UHC (standard):
'xl' | 'lg' | 'md' | 'sm' | 'xs' - UHC (display mode):
'lg' | 'md' | 'sm'
The default is xl.
Color
Use the color prop to set the color of the text. This prop accepts any valid CSS color identifieropens in a new window (RGB, HSL, named color, etc.) as well as Abyss color tokens. The default value is '$web.semantic.color.text.content.primary'.
Text colors must meet the minimum 3:1 contrast ratio for large text as per WCAG 2.1 guidelinesopens in a new window.
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'.
Display and serif (UHC Sans only)
For UHC brand, you can enable display typography with prop display, or use a serif font with serif. Display mode provides larger, serif-styled headings for prominent <h1> page titles. Using the serif prop applies a serif font style to the typical heading sizes.
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 | A11y | Description |
|---|---|---|---|---|---|
children | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined | The heading content to display | |||
className | string | undefined | CSS class name to apply to each element within the component | |||
color | string | undefined | '$web.semantic.color.text.content.primary' | The color of the heading | ||
css | CSSProperties | Partial<Record<"abyss-heading-root", CSSProperties>> | undefined | 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 | undefined | Suffix used to create a unique ID used for automated testing See Component Testing for more information | |||
disableDefaultProviderProps | boolean | undefined | 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 | boolean | undefined | Whether to use Display typography (UHC only) Display mode not available for Optum | |||
hiddenFrom | Breakpoint | undefined | When defined, the component is hidden once the screen width reaches the specified breakpoint. | |||
level | 1 | 2 | 3 | 4 | 5 | 6 | undefined | 1 | What level heading to display | ||
serif | boolean | undefined | false | Whether the heading should be serif or sans serif (UHC only) Serif not available for Optum | ||
size | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "xxs" | undefined | 'xl' | The visual size of the heading The visual size of the heading (limited for display mode) | ||
slotProps | Partial<Record<"heading-root", SlotPropsLeafValue>> | undefined | ||||
textAlign | "left" | "right" | "center" | undefined | The text alignment of the heading | |||
visibleFrom | Breakpoint | undefined | When defined, the component is hidden until the screen width reaches the specified breakpoint. |
Heading Classes
| Class Name | Description |
|---|---|
| .abyss-heading-root | The heading root element |