CTABanner

Use CTABanner to draw attention to or create urgency around a user action.

Experimental
Not reviewed for accessibility

On this page

import {CTABanner, Button} from '@primer/react-brand'

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 border

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 <ComparisonTable>. 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>

Optional shadow

The shadow can be removed using the hasShadow prop on the root CTABanner. 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 colors can be customized through dedicated CSS variables.

Name	Default Light	Default Dark
`--brand-CTABanner-shadow-color-start`	`--base-color-scale-green-5-hsl`	`--base-color-scale-green-2-hsl`
`--brand-CTABanner-shadow-color-end`	`--base-color-scale-blue-5-hsl`	`--base-color-scale-blue-3-hsl`

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-hsl);
    --brand-CTABanner-shadow-color-end: var(--base-color-scale-red-5-hsl);

  }
`
  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-hsl);
    --brand-CTABanner-shadow-color-end: var(--base-color-scale-red-5-hsl);

  }
`
  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

The first row in a table is automatically styled as a table header row.

name	type	default	required	description
`children`	`ReactNode`, `ReactNode[]`	`undefined`	`true`	Content to include within the banner component
`align`	`start`, `center`	`start`	`true`	The layout applied to the content wihin the banner component
`hasBorder`	`boolean`	`false`	`false`	A flag used to provide a border to the banner component
`hasBackground`	`boolean`	`true`	`false`	A flag used to add a background to the banner component
`className`	`string`		`false`	CTABanner custom class

CTABanner.Heading

Optional node that can be used to provide a heading for the banner.

name	type	default	required	description
`className`	`string`		`false`	Custom class name for the ComparisonTable.Heading component
`children`	`ReactNode`, `ReactNode[]`	undefined	`true`	Content to be displayed inside the ComparisonTable.Heading component.
`as`	`h1`, `h2`, `h3`, `h4`, `h5`, `h6`	`h3`	`false`	True symantic element to be use as the text wrapper. cell.
`size`	`1`, `2`, `3`, `4`, `5`, `6`	`2`	`false`	Content size to be displayed inside the column

CTABanner.Description

Optional node that can be used to provide a description for the banner.

name	type	default	required	description
`children`	`ReactNode`, `ReactNode[]`	undefined	`true`	Content to be displayed inside the banner component

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

CTABanner.ButtonGroup

Optional node that can be used to provide a description for the banner.

name	type	default	required	description
`className`	`string`	undefined	`false`	Sets a custom class on the root element
`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`	`ReactElement`		`false`	The semantic element that the button will be created as

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

Design tokens

css	js
`--brand-CTABanner-shadow-color-start`	`brand.CTABanner.shadow.color.start`
`--brand-CTABanner-shadow-color-end`	`brand.CTABanner.shadow.color.end`

Edit this page on GitHub