Banner

This component is used to advertise offers, marketing campaigns and important messages

Basic Usage


import { Banner } from '@octopus-energy/coral/atoms';
 
<Banner>Banner content</Banner>

Banner content

Properties

textAlign


<Banner textAlign='center'>Banner content</Banner>
<Banner textAlign='left'>Banner content</Banner>
<Banner textAlign='right'>Banner content</Banner>

Banner content

variant


<Banner variant='secondary'>Banner content</Banner>
<Banner variant='tertiary'>Banner content</Banner>

Banner content

Responsiveness


<Banner variant={{ base: 'secondary', md: 'tertiary' }}>Banner content</Banner>

Banner content

Full API

Name	Type	Default
`variant`	`ResponsiveVariant<ConditionalValue<"secondary" \| "tertiary"> \| undefined>` The colourway applied to this component. `secondary` - Ink #5840FF background with Ice #F0FFFF text `tertiary` - Aquamarine #BDF2FF background with Hemocyanin #180048 text	`secondary`
`textAlign`	`ConditionalValue<AnyString \| TextAlign \| readonly NonNullable<TextAlign \| undefined>[] \| undefined>` The alignment of the text within the banner.	`center`
`children`	`ReactNode`
`attributes`	`Attributes` This prop can be used to pass HTML attributes directly to the component. We currently allow passing `data-` and `aria-` attributes and the `id`. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content. Example usage: `AttributesProps: { 'id': 'close-button', 'aria-label': 'Close button', 'data-testid': 'close-button' };`

Design

Good to know

Choose an banner to draw attention to a limited time offer or a marketing campaign, we only use these at the top of the homepage.

How does it work?

The banner is static and can’t be interacted with.

How much text can I used in a banner?

Avoid using more than 100 characters.

What is the difference between the alert and banner?

The main difference is the alert is something we don’t want the user to ignore and should prompt and action. However the banner is fine to ignore as it is only for promo and marketing purposes.