import { Banner } from '@uhg-abyss/mobile';<Banner />Variants
Use the variant prop to set the type of Banner to render.
Background
Use the background prop to set the background color of the banner. The default value is white.
Image
Use the image prop to set an image in the image container of the banner.
Image Background Color
Use the imageBackgroundColor prop to set an image in the image container of the banner. The default is $semantic.color.surface.interactive.standards.rest.quaternary.
CTA
Use the cta prop to set a call to action button in the banner. If a cta is set
the number of lines of the heading paragraph are limited depending on the size of the CTA.
To view the truncation rules, see the Banner truncation conditions.
Banner Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| background | string | white | The background color of the banner. |
| cta | React.ReactNode | - | The action of the banner. |
| heading | string | - | The heading text of the banner. |
| image | React.ReactNode | - | The image of the banner. |
| imageBackgroundColor | string | $semantic.color.surface.interactive.standards.rest.quaternary | The background color of the image container. |
| isVisible | boolean | true | Flag to indicate if the banner is visible. |
| onClose | function | - | Callback function when the banner is closed. This prop is only used when isClosable is true. |
| paragraph | string | - | The paragraph text of the banner. |
| variant | 'horizontal' | 'vertical-lg' | 'vertical-sm' | 'branded' | 'horizontal' | The variant of the banner. |
Banner Classes
| Class Name | Description |
|---|---|
| abyss-banner-content | Container for heading and paragraph |
| abyss-banner-heading | Heading text |
| abyss-banner-image-container | Container for image or icon |
| abyss-banner-paragraph | Paragraph text |
| abyss-banner-root | Root element of the component |
Dynamic Type
Text and icons scale to Abyss standards. Any images, illustrations, or IconBrand passed to Banner should not scale. Size AX5 and larger cause reordering and resizing of all variants.
Banner Tokens
| Token Name | Value | |
|---|---|---|
| banner.color.surface.container.white | #FFFFFF | |
| banner.color.surface.container.emphasis-2 | #FAF8F2 | |
| banner.color.surface.container.emphasis-1 | #F0F9ED | |
| banner.color.surface.container.emphasis-3 | #EEF8FB | |
| banner.color.surface.container.emphasis-4 | #F7FCFD | |
| banner.color.surface.branding-container | #FFFFFF | |
| banner.color.surface.close-icon-container | rgba(255,255,255,0.6) | |
| banner.color.text.heading | #002677 | |
| banner.color.text.paragraph | #4B4D4F | |
| banner.color.text.eyebrow | #4B4D4F | |
| banner.color.border.container | #CBCCCD | |
| banner.color.icon.utility | #002677 | |
| banner.color.icon.close | #4B4D4F | |
| banner.border-radius.all.container | 12 | |
| banner.border-radius.all.close-icon-container | 500 | |
| banner.border-width.all.container | 0.5 | |
| banner.sizing.icon.all.utility | 16 | |
| banner.sizing.icon.all.close | 24 | |
| banner.spacing.gap.vertical.container.featured | 8 | |
| banner.spacing.gap.vertical.container.branded | 12 | |
| banner.spacing.gap.vertical.text | 2 | |
| banner.spacing.padding.all.content | 16 | |
| banner.spacing.padding.all.close-icon-container | 2 | |
| banner.spacing.padding.all.container.branded | 16 | |
| banner.box-shadow.container |
|
Banner Classes
| V2 | V1 | Status |
|---|---|---|
| banner-close-button | banner-close-button | Unchanged |
| banner-close-icon | - | Added |
| banner-content | banner-content | Unchanged |
| - | banner-eyebrow | Removed |
| - | banner-footer | Removed |
| banner-heading | banner-title | Renamed |
| banner-image-container | banner-image-container | Unchanged |
| banner-paragraph | banner-description | Removed |
| banner-root | banner-root | Unchanged |
| - | banner-text-wrapper | Removed |
Banner Props
| V2 | V1 | Status |
|---|---|---|
| background | color | Renamed |
| - | centerText | Removed |
| - | content | Removed |
| cta | - | Added |
| - | ctaType | Removed |
| - | eyebrow | Removed |
| - | fixed | Removed |
| - | footer | Removed |
| - | grow | Removed |
| heading | title | Renamed |
| - | href | Removed |
| image | image | Unchanged |
| imageBackgroundColor | imageBackgroundColor | Unchanged |
| - | isCloseable | Removed |
| - | isDisabled | Removed |
| isVisible | isVisible | Unchanged |
| - | linkIcon | Removed |
| - | linkText | Removed |
| onClose | onClose | Unchanged |
| - | onPress | Removed |
| paragraph | description | Renamed |
| - | showExternalIcon | Removed |
| - | textSize | Removed |
| variant | variant | Modified |