CTA banner

Use the CTA banner component to highlight and create urgency around user actions.

Examples

Default

<CTABanner>
  <CTABanner.Heading>
    Where the most ambitious teams build great things
  </CTABanner.Heading>
  <CTABanner.Description>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit
    ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar risus
    elementum.
  </CTABanner.Description>
  <CTABanner.ButtonGroup>
    <Button>Primary Action</Button>
    <Button>Secondary Action</Button>
  </CTABanner.ButtonGroup>
</CTABanner>

<CTABanner>
  <CTABanner.Heading>
    Where the most ambitious teams build great things
  </CTABanner.Heading>
  <CTABanner.Description>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit
    ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar risus
    elementum.
  </CTABanner.Description>
  <CTABanner.ButtonGroup>
    <Button>Primary Action</Button>
    <Button>Secondary Action</Button>
  </CTABanner.ButtonGroup>
</CTABanner>

Alignment

The content alignment can be changed using the align prop on the root CTABanner. This can be configured to either start or center.

<CTABanner align="center">
  <CTABanner.Heading>
    Where the most ambitious teams build great things
  </CTABanner.Heading>
  <CTABanner.Description>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit
    ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar risus
    elementum.
  </CTABanner.Description>
  <CTABanner.ButtonGroup>
    <Button>Primary Action</Button>
    <Button>Secondary Action</Button>
  </CTABanner.ButtonGroup>
</CTABanner>

<CTABanner align="center">
  <CTABanner.Heading>
    Where the most ambitious teams build great things
  </CTABanner.Heading>
  <CTABanner.Description>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit
    ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar risus
    elementum.
  </CTABanner.Description>
  <CTABanner.ButtonGroup>
    <Button>Primary Action</Button>
    <Button>Secondary Action</Button>
  </CTABanner.ButtonGroup>
</CTABanner>

Optional background image

<ThemeProvider colorMode="dark">
  <CTABanner
    backgroundImageSrc={{
      narrow:
        'https://github.com/user-attachments/assets/a28110fd-d019-41a4-8f80-b49ae8895708',
      regular:
        'https://github.com/user-attachments/assets/a28110fd-d019-41a4-8f80-b49ae8895708',
      wide: 'https://github.com/user-attachments/assets/a28110fd-d019-41a4-8f80-b49ae8895708',
    }}
    align="center"
    hasShadow={false}
  >
    <CTABanner.Heading>
      Where the most ambitious teams build great things
    </CTABanner.Heading>
    <CTABanner.Description variant="default">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit
      ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar risus
      elementum.
    </CTABanner.Description>
    <CTABanner.ButtonGroup>
      <Button>Primary Action</Button>
    </CTABanner.ButtonGroup>
  </CTABanner>
</ThemeProvider>

<ThemeProvider colorMode="dark">
  <CTABanner
    backgroundImageSrc={{
      narrow:
        'https://github.com/user-attachments/assets/a28110fd-d019-41a4-8f80-b49ae8895708',
      regular:
        'https://github.com/user-attachments/assets/a28110fd-d019-41a4-8f80-b49ae8895708',
      wide: 'https://github.com/user-attachments/assets/a28110fd-d019-41a4-8f80-b49ae8895708',
    }}
    align="center"
    hasShadow={false}
  >
    <CTABanner.Heading>
      Where the most ambitious teams build great things
    </CTABanner.Heading>
    <CTABanner.Description variant="default">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit
      ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar risus
      elementum.
    </CTABanner.Description>
    <CTABanner.ButtonGroup>
      <Button>Primary Action</Button>
    </CTABanner.ButtonGroup>
  </CTABanner>
</ThemeProvider>

Optional background colors

CTABanner supports default, subtle and arbitrary background-color values

<CTABanner backgroundColor="subtle" hasShadow={false}>
  <CTABanner.Heading>
    Where the most ambitious teams build great things
  </CTABanner.Heading>
  <CTABanner.Description>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit
    ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar risus
    elementum.
  </CTABanner.Description>
  <CTABanner.ButtonGroup>
    <Button>Primary Action</Button>
  </CTABanner.ButtonGroup>
</CTABanner>

<CTABanner backgroundColor="subtle" hasShadow={false}>
  <CTABanner.Heading>
    Where the most ambitious teams build great things
  </CTABanner.Heading>
  <CTABanner.Description>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit
    ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar risus
    elementum.
  </CTABanner.Description>
  <CTABanner.ButtonGroup>
    <Button>Primary Action</Button>
  </CTABanner.ButtonGroup>
</CTABanner>

A border can be provided using the hasBorder prop on the root CTABanner. This will render a border around the CTABanner component giving further separation between the foreground and background. Especially when there is no shadow present on the background.

<CTABanner hasBorder>
  <CTABanner.Heading>
    Where the most ambitious teams build great things
  </CTABanner.Heading>
  <CTABanner.Description>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit
    ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar risus
    elementum.
  </CTABanner.Description>
  <CTABanner.ButtonGroup>
    <Button>Primary Action</Button>
    <Button>Secondary Action</Button>
  </CTABanner.ButtonGroup>
</CTABanner>

<CTABanner hasBorder>
  <CTABanner.Heading>
    Where the most ambitious teams build great things
  </CTABanner.Heading>
  <CTABanner.Description>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit
    ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar risus
    elementum.
  </CTABanner.Description>
  <CTABanner.ButtonGroup>
    <Button>Primary Action</Button>
    <Button>Secondary Action</Button>
  </CTABanner.ButtonGroup>
</CTABanner>

Optional background

A background can be removed using the hasBackground prop on the root CTABanner. This will render the CTABanner component without a background allowing it to blend in with its parent.

<CTABanner hasBackground={false} hasShadow={false}>
  <CTABanner.Heading>
    Where the most ambitious teams build great things
  </CTABanner.Heading>
  <CTABanner.Description>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit
    ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar risus
    elementum.
  </CTABanner.Description>
  <CTABanner.ButtonGroup>
    <Button>Primary Action</Button>
    <Button>Secondary Action</Button>
  </CTABanner.ButtonGroup>
</CTABanner>

<CTABanner hasBackground={false} hasShadow={false}>
  <CTABanner.Heading>
    Where the most ambitious teams build great things
  </CTABanner.Heading>
  <CTABanner.Description>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit
    ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar risus
    elementum.
  </CTABanner.Description>
  <CTABanner.ButtonGroup>
    <Button>Primary Action</Button>
    <Button>Secondary Action</Button>
  </CTABanner.ButtonGroup>
</CTABanner>

Remove shadow

The shadow can be removed using the hasShadow prop. This will render the component without the background shadow.

<CTABanner hasShadow={false}>
  <CTABanner.Heading>
    Where the most ambitious teams build great things
  </CTABanner.Heading>
  <CTABanner.Description>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit
    ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar risus
    elementum.
  </CTABanner.Description>
  <CTABanner.ButtonGroup>
    <Button>Primary Action</Button>
    <Button>Secondary Action</Button>
  </CTABanner.ButtonGroup>
</CTABanner>

<CTABanner hasShadow={false}>
  <CTABanner.Heading>
    Where the most ambitious teams build great things
  </CTABanner.Heading>
  <CTABanner.Description>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit
    ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar risus
    elementum.
  </CTABanner.Description>
  <CTABanner.ButtonGroup>
    <Button>Primary Action</Button>
    <Button>Secondary Action</Button>
  </CTABanner.ButtonGroup>
</CTABanner>

Shadow color customization

The default shadow colors can be customized through their respective CSS variables.

const App = () => {
  const designTokenOverrides = `
  .custom-colors[data-color-mode='dark'] {

    /*
     * Modify the value of these tokens.
     * Remember to apply light mode equivalents if you're enabling theme switching.
     */
    --brand-CTABanner-shadow-color-start: var(--base-color-scale-purple-5);
    --brand-CTABanner-shadow-color-end: var(--base-color-scale-red-5);

  }
`
  return (
    <ThemeProvider colorMode="dark" className="custom-colors">
      <style>{designTokenOverrides}</style>
      <CTABanner>
        <CTABanner.Heading>
          Where the most ambitious teams build great things
        </CTABanner.Heading>
        <CTABanner.Description>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit
          ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar risus
          elementum.
        </CTABanner.Description>
        <CTABanner.ButtonGroup>
          <Button>Primary Action</Button>
          <Button>Secondary Action</Button>
        </CTABanner.ButtonGroup>
      </CTABanner>
    </ThemeProvider>
  )
}

render(<App />)

const App = () => {
  const designTokenOverrides = `
  .custom-colors[data-color-mode='dark'] {

    /*
     * Modify the value of these tokens.
     * Remember to apply light mode equivalents if you're enabling theme switching.
     */
    --brand-CTABanner-shadow-color-start: var(--base-color-scale-purple-5);
    --brand-CTABanner-shadow-color-end: var(--base-color-scale-red-5);

  }
`
  return (
    <ThemeProvider colorMode="dark" className="custom-colors">
      <style>{designTokenOverrides}</style>
      <CTABanner>
        <CTABanner.Heading>
          Where the most ambitious teams build great things
        </CTABanner.Heading>
        <CTABanner.Description>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien sit
          ullamcorper id. Aliquam luctus sed turpis felis nam pulvinar risus
          elementum.
        </CTABanner.Description>
        <CTABanner.ButtonGroup>
          <Button>Primary Action</Button>
          <Button>Secondary Action</Button>
        </CTABanner.ButtonGroup>
      </CTABanner>
    </ThemeProvider>
  )
}

render(<App />)

Component props

CTABanner Required

name	type	default	required	description
`children`	`ReactNode`, `ReactNode[]`	`undefined`	`true`	Content to include within the banner component
`align`	`'start'`, `'center'`	`'start'`	`true`	The horizontal positioning of content within the banner component
`backgroundColor`	`'default'`, `'subtle'`, `'string'`, `'ResponsiveMap'`	`'default'`	`false`	Optional, custom background color
`backgroundImageSrc`	`'string'`, `'ResponsiveMap'`	`undefined`	`false`	Optional, custom background image
`backgroundImagePosition`	`'string'`, `'ResponsiveMap'`	`'center'`	`false`	Optional, custom background position
`backgroundImageSize`	`'string'`, `'ResponsiveMap'`	`'cover'`	`false`	Optional, custom background position size
`hasBorder`	`boolean`	`false`	`false`	A flag used to provide a border to the banner component
`hasShadow`	`boolean`	`true`	`false`	A flag used to provide a shadow to the banner component
`hasBackground`	`boolean`	`true`	`false`	A flag used to add a background to the banner component

CTABanner.Heading

name	type	default	required	description
`children`	`ReactNode`, `ReactNode[]`	`undefined`	`true`	Content to be displayed inside the `CTABanner.Heading` component
`as`	`'h1'`, `'h2'`, `'h3'`, `'h4'`, `'h5'`, `'h6'`	`'h3'`	`false`	Heading level
`size`	`'1'`, `'2'`, `'3'`, `'4'`, `'5'`, `'6'`	`'1'`	`false`	Visual heading size, irrespective of level

CTABanner.Description

name	type	default	required	description
`children`	`ReactNode`, `ReactNode[]`	`undefined`	`true`	Content to be displayed inside the banner component
`variant`	`'default'` `'muted'`	`'muted'`	Specify alternative text appearance

CTABanner.ButtonGroup Required

name	type	default	required	description
`children`	`<Button>`, `<Button>[]`	`undefined`	`true`	The buttons to be displayed within the group
`buttonSize`	`'medium'`, `'large'`	`large`	`false`	The size of the buttons in the group
`buttonsAs`	`'a'`, `'button'`	`'button'`	`false`	Sets underlying HTML element for each button

id, className and ref are forwarded by default to all children.

BreakoutBanner

Site navigation