import { PageBodyIntro } from '@uhg-abyss/web/ui/PageBodyIntro';Breadcrumbs
The breadcrumbs prop is used to display a breadcrumb navigation in the PageBodyIntro. It accepts an array of objects, each with a title and href property. The title is the text that will be displayed for the breadcrumb, while the href is the URL that the breadcrumb will link to. For further documentation, see the Breadcrumbs component.
Click Handling
Use the onBreadcrumbClick prop to supply a function that will be called when a breadcrumb is clicked. The function will receive the click event and the data for the clicked breadcrumb (its title and href) as arguments. This prop is passed into Breadcrumbs.
Heading
There are two ways to display a heading in the PageBodyIntro: by passing a string to the title prop, or by passing a custom element to the heading prop.
Using title will render our Heading component with default styling and the title provided. The title is rendered as an <h1> element; this can be customized using the headingLevel prop.
Our heading prop allows for greater flexibility to pass in a custom element. We recommend using our Heading component directly, as seen below.
Text
Use the text prop to supply optional body copy.
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 | A11y | Description |
|---|---|---|---|---|---|
breadcrumbs | BreadcrumbItem[] | Items to be displayed in the PageBodyIntro's navigation section breadcrumbs See the Breadcrumbs docs for more information | |||
children | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined | Item(s) to display beneath the navigation and heading sections | |||
className | string | undefined | CSS class name to apply to each element within the component | |||
contentAction | ReactElement<any, string | JSXElementConstructor<any>> | undefined | If present, the content section will display this action | |||
css | CSSProperties | Partial<Record<"abyss-page-body-intro-heading" | "abyss-page-body-intro-root" | "abyss-page-body-intro-wrapper" | "abyss-page-body-intro-content" | ... 5 more ... | "abyss-page-body-intro-text-wrapper", 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. | ||
heading | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | null | undefined | Custom heading element (not available when using title prop) Custom heading element to render instead of the default Heading component | |||
headingLevel | 1 | 2 | 3 | 4 | 5 | 6 | undefined | 1 | The semantic heading level for the page title, so it fits correctly into the page's heading structure for screen readers. The heading level (not available when using heading prop) | ||
hiddenFrom | Breakpoint | undefined | When defined, the component is hidden once the screen width reaches the specified breakpoint. | |||
hideBottomBorder | boolean | undefined | false | If true, the bottom border will be removed | ||
navAction | ReactElement<any, string | JSXElementConstructor<any>> | undefined | If present, the navigation section will display this action | |||
onBreadcrumbClick | ((e: MouseClickEvent<HTMLElement>, data: { title: string; href: string; }) => void) | undefined | Function to be called when a breadcrumb is clicked | |||
slotProps | PageBodyIntroSlotPropsMap | undefined | Props to pass to individual internal slots of the component. To target slots inside sub-components (e.g. the breadcrumbs or the heading), nest the sub-component's slotProps under the parent slot key: slotProps={{ 'page-body-intro-breadcrumbs': { slotProps: { '<inner-key>': {...} } } }} See slotProps for more information | |||
sticky | boolean | CSSProperties | undefined | 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. See the CSSType GitHub repositoryopens in a new window for more information on CSS properties | ||
text | string | undefined | The body copy to display below the title | |||
title | string | undefined | The title of the page The title of the page (not available when using heading prop) | |||
variant | "neutral" | "emphasis" | undefined | 'neutral' | The visual variant | ||
visibleFrom | Breakpoint | undefined | When defined, the component is hidden until the screen width reaches the specified breakpoint. |
PageBodyIntro Classes
| Class Name | Description |
|---|---|
| .abyss-page-body-intro-body-text | PageBodyIntro body text |
| .abyss-page-body-intro-breadcrumbs | PageBodyIntro breadcrumbs |
| .abyss-page-body-intro-content | PageBodyIntro content |
| .abyss-page-body-intro-content-action | PageBodyIntro content action |
| .abyss-page-body-intro-heading | PageBodyIntro heading |
| .abyss-page-body-intro-nav-action | PageBodyIntro navigation action |
| .abyss-page-body-intro-navigation-row | PageBodyIntro navigation row |
| .abyss-page-body-intro-root | PageBodyIntro root element |
| .abyss-page-body-intro-text-wrapper | PageBodyIntro heading and paragraph wrapper |
| .abyss-page-body-intro-wrapper | PageBodyIntro wrapper |
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 Deque's Axe, 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
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 |