Banner Regular

Related components

The BannerRegular component has multiple building blocks that can be combined to achieve the desired result. You can pass in a colorScheme object to the BannerRegular to customise the component's colours. ColorScheme is experimental and has been implemented only locally, but you can read more about how it currently works and available options on the repository's github.

Anatomy

The root BannerRegular component manages the banner's configuration and exposes it via the React Context API. This state can be accessed by any child components by calling the useBannerContext hook. The sub-components call this hook to refer to the core configuration and render accordingly.

Examples

We have several variations with which BannerRegular can be rendered

Size variant

By default sizing is breakpoint based with the following format: size: { '@initial': 'sm', '@md': 'md' }

<BannerRegular
  colorScheme={{ base: 'purple1' }}
  emphasis="bold"
>
  <BannerRegular.Content>
    <BannerRegular.Text>
      This is the default variant of BannerRegular.
    </BannerRegular.Text>
    <BannerRegular.Actions>
      <BannerRegular.Button>Primary CTA</BannerRegular.Button>
    </BannerRegular.Actions>
  </BannerRegular.Content>
  <BannerRegular.Dismiss />
  <BannerRegular.Image src="https://picsum.photos/id/919/400/400" />
</BannerRegular>

`sm`


<BannerRegular
  colorScheme={{ base: 'purple1' }}
  emphasis="bold"
  size="sm"
>
  <BannerRegular.Content>
    <BannerRegular.Heading>Example Heading</BannerRegular.Heading>
    <BannerRegular.Text>
      This is an example text
    </BannerRegular.Text>
    <BannerRegular.Actions>
      <BannerRegular.Button>Primary CTA</BannerRegular.Button>
      <BannerRegular.Button>Secondary CTA</BannerRegular.Button>
    </BannerRegular.Actions>
  </BannerRegular.Content>
</BannerRegular>

`md`


<BannerRegular
  colorScheme={{ base: 'primary1' }}
  emphasis="subtle"
  size="md"
>
  <BannerRegular.Content>
    <BannerRegular.Heading>Example Heading</BannerRegular.Heading>
    <BannerRegular.Text>
      This is an example text
    </BannerRegular.Text>
    <BannerRegular.Actions>
      <BannerRegular.Button>Primary CTA</BannerRegular.Button>
    </BannerRegular.Actions>
  </BannerRegular.Content>
  <BannerRegular.Image src="https://picsum.photos/id/919/400/300" />
</BannerRegular>

Emphasis Variant

We have three options for the emphasis variant: bold, subtle and minimal. The default is minimal.


<BannerRegular
  colorScheme={{ base: 'primary1' }}
  emphasis="bold"
  size="md"
>
  <BannerRegular.Content>
    <BannerRegular.Heading>Example Heading</BannerRegular.Heading>
    <BannerRegular.Text>
      This is an example of a bold Banner
    </BannerRegular.Text>
    <BannerRegular.Actions>
      <BannerRegular.Button>Primary CTA</BannerRegular.Button>
    </BannerRegular.Actions>
  </BannerRegular.Content>
</BannerRegular>

Dismissible Variant

It's possible to render it as a dismissible component as well. Just add <BannerRegular.Dismiss /> as a sibling to BannerRegular.Content.


<BannerRegular
  colorScheme={{ base: 'primary2' }}
  emphasis="subtle"
  size="md"
  onDismiss={() => console.log('Dismissed')}>

  <BannerRegular.Content>
    <BannerRegular.Heading>Example Heading</BannerRegular.Heading>
    <BannerRegular.Text>
      This is an example text
    </BannerRegular.Text>
    <BannerRegular.Actions>
      <BannerRegular.Button>Primary CTA</BannerRegular.Button>
    </BannerRegular.Actions> 
  </BannerRegular.Content>
  <BannerRegular.Image src="https://picsum.photos/id/919/400/300" />
  <BannerRegular.Dismiss />
</BannerRegular>

You can also add an action to happen when the dismiss button gets called by passing onDismiss

Dismissible Variant

The banner an be disabled by passing the disabled prop.


<BannerRegular
  colorScheme={{ base: 'primary2' }}
  emphasis="subtle"
  disabled
>
  <BannerRegular.Content>
    <BannerRegular.Heading>Example Heading</BannerRegular.Heading>
    <BannerRegular.Text>
      This is an example text
    </BannerRegular.Text>
    <BannerRegular.Actions>
      <BannerRegular.Button>Primary CTA</BannerRegular.Button>
    </BannerRegular.Actions> 
  </BannerRegular.Content>















  















  
</BannerRegular>