import { PageBodyIntro } from '@uhg-abyss/web/ui/PageBodyIntro';Text
Use the title prop to supply a title for the PageBodyIntro and the text prop to supply body copy. A title is always required, but the text is optional.
By default, the title is rendered as an <h1> element; this can be customized using the headingLevel prop.
Extra content
Extra items can be added below the heading row by passing them as children to the PageBodyIntro component.
Variant
Use the variant prop to change the background color. The possible options are 'neutral' and 'emphasis'. The default is 'neutral'.
Actions
Both the navigation and heading rows include slots for actions. The navAction prop is typically used for an icon, while the contentAction prop is used for a button. We recommend using our Button component for these props.
Sticky positioning
Use the sticky prop to make the PageBodyIntro sticky. If sticky is provided with no value, the following styling will be applied to the root element:
{ top: 0, zIndex: 200, position: 'sticky',}To customize the sticky styling, an object containing CSS properties can instead be provided to the sticky prop. in the example below, the top property is set to match the height of this site's global navbar.
Hide bottom border
Use the hideBottomBorder prop to remove the bottom border of the PageBodyIntro. The default value is false.
Responsiveness
On screens less than 744px wide, the PageBodyIntro will adjust its layout. Resize the window to see the change!
PageBodyIntro Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
breadcrumbs | BreadcrumbItem[] | - | Items to be displayed in the PageBodyIntro's navigation section breadcrumbs | |
children | React.ReactNode | - | - | Item(s) to display beneath the navigation and heading sections |
className | string | - | - | CSS class name to apply to each element within the component |
contentAction | React.ReactElement<any, string | React.JSXElementConstructor<any>> | - | - | If present, the content section will display this action |
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 |
data-testid | string | - | - | Suffix used to create a unique ID used for automated testing |
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. |
headingLevel | 1 | 2 | 3 | 4 | 5 | 6 | 1 | - | The heading level of the PageBodyIntro title |
hideBottomBorder | boolean | false | - | If true, the bottom border will be removed |
navAction | React.ReactElement<any, string | React.JSXElementConstructor<any>> | - | - | If present, the navigation section will display this action |
sticky | boolean | React.CSSProperties | false | - | If true, the PageBodyIntro will be sticky. If the value is an object, its values will be added to the styling added to the component. |
text | string | - | - | The body copy to display below the title |
title | string | - | The title of the page | |
variant | "neutral" | "emphasis" | 'neutral' | - | The visual variant |
PageBodyIntro Classes
| Class Name | Description |
|---|---|
| .abyss-page-body-intro-root | PageBodyIntro root element |
| .abyss-page-body-intro-wrapper | PageBodyIntro wrapper |
| .abyss-page-body-intro-navigation-row | PageBodyIntro navigation row |
| .abyss-page-body-intro-breadcrumbs | PageBodyIntro breadcrumbs |
| .abyss-page-body-intro-nav-action | PageBodyIntro navigation action |
| .abyss-page-body-intro-content | PageBodyIntro content |
| .abyss-page-body-intro-content-action | PageBodyIntro content action |
| .abyss-page-body-intro-text-wrapper | PageBodyIntro heading and paragraph wrapper |
| .abyss-page-body-intro-heading | PageBodyIntro heading |
| .abyss-page-body-intro-body-text | PageBodyIntro body text |
Known issue
PageBodyIntro is a page templating component. In its current state, it does not define the page's main content section, which is important for screen readers and other assistive technologies. To ensure that the main content is properly defined, you should wrap the PageBodyIntro along with the rest of the page content in an HTML <main> element with id="main-content". Note that doing so may result in accessibility errors from tooling such as Evinced stating that the breadcrumbs should not be placed within the main content. This will be addressed in a future Abyss update when we revisit page template components.
Example
Component Tokens
Note: Click on the token row to copy the token to your clipboard.
PageBodyIntro Tokens
| Token Name | Value | |
|---|---|---|
| page-body-intro.color.border.container | #CBCCCD | |
| page-body-intro.color.surface.container.emphasis | #E5F8FB | |
| page-body-intro.color.surface.container.neutral | #FFFFFF | |
| page-body-intro.color.text.heading | #002677 | |
| page-body-intro.color.text.paragraph | #4B4D4F | |
| page-body-intro.border-width.bottom.container | 1px | |
| page-body-intro.spacing.gap.horizontal.navigation | 40px | |
| page-body-intro.spacing.gap.vertical.wrapper | 16px | |
| page-body-intro.spacing.gap.vertical.content.mobile | 16px | |
| page-body-intro.spacing.gap.vertical.text | 8px | |
| page-body-intro.spacing.padding.bottom.container.web | 48px | |
| page-body-intro.spacing.padding.horizontal.container.mobile | 16px | |
| page-body-intro.spacing.padding.horizontal.container.web | 24px | |
| page-body-intro.spacing.padding.top.container.web | 24px | |
| page-body-intro.spacing.padding.vertical.container.mobile | 24px |