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

children

title

color

dismissible

() => {
  return (
    <EmphasisBanner
      title="Emphasis Banner"
      color="emphasis1"
      dismissible={true}
    >
      Lorem ipsum odor amet, consectetuer adipiscing elit. Ipsum rhoncus duis vestibulum fringilla mollis.
    </EmphasisBanner>
  );
};

Title

Use the title prop to set the title of the Emphasis Banner. By default, the title is rendered as an <h2>, but this can be configured using the headingLevel prop.

Content

Text content

The children of the Emphasis Banner will be displayed as the main content. The content can only be a string and is limited to 100 characters in length.

Custom content

Use the customContent prop to add custom content below the main text content. This prop accepts any valid ReactNode.

Color

Use the color prop to set the color of the Emphasis Banner. The available options are 'emphasis1', 'emphasis2', 'emphasis3', and 'emphasis4'.

Brand icon

Use the iconBrand prop to add an IconBrand to the Emphasis Banner. The iconBrand prop accepts an object of most props of the IconBrand component, except size, which is set by the Emphasis Banner and cannot be altered.

CTA

Use the cta prop to add a call-to-action to the Emphasis Banner. The cta prop accepts an object with the following structure:

{
  primaryButton?: ButtonProps;
  secondaryButton?: ButtonProps;
  link?: LinkProps;
}

Rules for cta:

• primaryButton: A primary button must always be used with a secondary button and cannot be used alone.
• secondaryButton: A secondary button can be used alone, but not with a link.
• link: If a link is provided, it is exclusive and cannot be used with a primary button or secondary button.

ButtonProps and LinkProps are objects that accept most props of the Button and Link components, respectively, except for size, which is set by the Emphasis Banner and cannot be altered.

Dismissible

Use the dismissible prop to control whether the Emphasis Banner can be closed. The default value is true.

onClose

Use the onClose prop to execute a custom callback when the Emphasis Banner is closed.

Note: onClose is only used when dismissible is true.

Responsiveness

On screens less than 744px wide, the Emphasis Banner will adjust its layout. Resize the window to see the change!

EmphasisBanner Props

Name	Type	Default	Required	Description
children	string	-		The contents of the EmphasisBanner
className	string	-	-	CSS class name to apply to each element within the component
color	"emphasis1" | "emphasis2" | "emphasis3" | "emphasis4"	-		The color of the EmphasisBanner
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
cta	EmphasisBannerCta	-	-	If present, the EmphasisBanner will display a button or a link
customContent	React.ReactNode	-	-	Custom content to display below the text content
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.
dismissible	boolean	true	-	If true, the EmphasisBanner can be dismissed
headingLevel	1 | 2 | 3 | 4 | 5 | 6	2	-	Heading level of the EmphasisBanner title
iconBrand	EmphasisBannerIconBrand	-	-	If present, the EmphasisBanner will display an IconBrand
onClose	React.MouseEventHandler<HTMLButtonElement>	-	-	Callback function executed when the EmphasisBanner is closed; only used when dismissible is true
title	string	-		The title of the EmphasisBanner

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

Abyss.d.ts

EmphasisBanner.types.ts

EmphasisBanner Classes

Class Name	Description
.abyss-emphasis-banner-root	EmphasisBanner root element
.abyss-emphasis-banner-wrapper	EmphasisBanner wrapper element
.abyss-emphasis-banner-icon-brand	EmphasisBanner IconBrand element
.abyss-emphasis-banner-main-content	EmphasisBanner main content container
.abyss-emphasis-banner-content	EmphasisBanner content container
.abyss-emphasis-banner-text-container	EmphasisBanner text content container
.abyss-emphasis-banner-title-container	EmphasisBanner title container
.abyss-emphasis-banner-title	EmphasisBanner title element
.abyss-emphasis-banner-body-text	EmphasisBanner body text element
.abyss-emphasis-banner-cta-container	EmphasisBanner cta container
.abyss-emphasis-banner-cta-link	EmphasisBanner link element
.abyss-emphasis-banner-primary-button	EmphasisBanner primary button element
.abyss-emphasis-banner-secondary-button	EmphasisBanner secondary button element
.abyss-emphasis-banner-separator	EmphasisBanner separator element
.abyss-emphasis-banner-close-button	EmphasisBanner close button element
.abyss-emphasis-banner-close-icon	EmphasisBanner close button icon element

Keyboard Interactions

Key	Description
Tab	Moves focus on the next interactive element within the Emphasis Banner
Shift + Tab	Moves focus to the previous interactive element within the Emphasis Banner
Enter	When focus is on a button within the Emphasis Banner, pressing enter will press the button
Space	When focus is on a button within the Emphasis Banner, pressing space will press the button

Decorative Icons

The brand icon in the Emphasis Banner is considered decorative and does not require a text alternative, though one can be provided if desired.

Close Button Guidance

If the close button is present—which it is by default—it must be keyboard accessible. A keyboard-only user must be able to tab to the button, and activate it with the space bar and the enter key. When the Emphasis Banner is closed, focus must be placed back where it previously was on the page.

Component Tokens

Note: Click on the token row to copy the token to your clipboard.

Search tokens

EmphasisBanner Tokens

Token Name	Value
emphasis-banner.color.border.separator	#4B4D4F
emphasis-banner.color.icon.utility.active	#000000
emphasis-banner.color.icon.utility.hover	#323334
emphasis-banner.color.icon.utility.rest	#4B4D4F
emphasis-banner.color.surface.container.emphasis-1	#F0F9ED
emphasis-banner.color.surface.container.emphasis-2	#FAF8F2
emphasis-banner.color.surface.container.emphasis-3	#FAFCFF
emphasis-banner.color.surface.container.emphasis-4	#E5F8FB
emphasis-banner.color.text.heading	#323334
emphasis-banner.color.text.paragraph	#4B4D4F
emphasis-banner.border-width.separator	1px
emphasis-banner.sizing.all.icon.illustrative.mobile	40px
emphasis-banner.sizing.all.icon.illustrative.web	48px
emphasis-banner.sizing.all.icon.utility	20px
emphasis-banner.spacing.gap.horizontal.buttons	8px
emphasis-banner.spacing.gap.horizontal.container.mobile	16px
emphasis-banner.spacing.gap.horizontal.container.web	24px
emphasis-banner.spacing.gap.horizontal.content.web	24px
emphasis-banner.spacing.gap.vertical.content.mobile	16px
emphasis-banner.spacing.gap.vertical.content.web	16px
emphasis-banner.spacing.gap.vertical.text.mobile	4px
emphasis-banner.spacing.gap.vertical.text.web	2px
emphasis-banner.spacing.padding.horizontal.container.web	24px
emphasis-banner.spacing.padding.left.container.mobile	16px
emphasis-banner.spacing.padding.right.container.mobile	24px
emphasis-banner.spacing.padding.vertical.container	16px