Banner Slim

Related components

The BannerSlim component has multiple building blocks which can be put together in a composable manner to get the desired result. You can pass in a colorScheme object to the BannerSlim 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 BannerSlim 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 BannerSlim can be rendered

Size variant

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

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

`sm`


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

`md`


<BannerSlim
  colorScheme={{ base: 'primary1' }}
  emphasis="subtle"
  size="md"
>
  <BannerSlim.Content>
    <BannerSlim.Image src="https://picsum.photos/id/919/400/400" />
    <BannerSlim.Text>
      This is the "md" variant of BannerSlim.
    </BannerSlim.Text>
  </BannerSlim.Content>
  <BannerSlim.Actions>
    <BannerSlim.Button>Primary CTA</BannerSlim.Button>
  </BannerSlim.Actions>
</BannerSlim>

Emphasis Variant

The component comes with three options on emphasis: bold, subtle and minimal , with the later the default.

Example of bold emphasis


<BannerSlim
  emphasis="bold"
>
  <BannerSlim.Content>
    <BannerSlim.Image src="https://picsum.photos/id/919/400/400" />
    <BannerSlim.Text>
      This is the "bold" emphasis variant of BannerSlim.
    </BannerSlim.Text>
  </BannerSlim.Content>
  <BannerSlim.Actions>
    <BannerSlim.Button>Primary CTA</BannerSlim.Button>
  </BannerSlim.Actions>
</BannerSlim>

Dismissible Variant

It's possible to render it as a dismissible component as well. Just add <BannerSlim.Dismiss /> as a child to BannerSlim.Actions.


<BannerSlim
  colorScheme={{ base: 'primary2' }}
  emphasis="subtle"
  size="md"
  onDismiss={() => console.log('Dismissed')}
>
  <BannerSlim.Content>
    <BannerSlim.Image src="https://picsum.photos/id/919/400/400" />
    <BannerSlim.Text>
      This is the dismissible variant of BannerSlim.
    </BannerSlim.Text>
  </BannerSlim.Content>
  <BannerSlim.Actions>
    <BannerSlim.Button>Primary CTA</BannerSlim.Button>
    <BannerSlim.Dismiss />
  </BannerSlim.Actions>
</BannerSlim>

Disabled Variant


<BannerSlim
  colorScheme={{ base: 'primary2' }}
disabled


>
  <BannerSlim.Content>
    <BannerSlim.Image src="https://picsum.photos/id/919/400/400" />
    <BannerSlim.Text>
      This is the disabled variant of BannerSlim.
    </BannerSlim.Text>
  </BannerSlim.Content>
  <BannerSlim.Actions>
    <BannerSlim.Button>Primary CTA</BannerSlim.Button>
    <BannerSlim.Dismiss />
  </BannerSlim.Actions>
</BannerSlim>