import {CTABanner, Button} from '@primer/react-brand'
<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 situllamcorper id. Aliquam luctus sed turpis felis nam pulvinar risuselementum.</CTABanner.Description><CTABanner.ButtonGroup><Button>Primary Action</Button><Button>Secondary Action</Button></CTABanner.ButtonGroup></CTABanner>
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 situllamcorper id. Aliquam luctus sed turpis felis nam pulvinar risuselementum.</CTABanner.Description><CTABanner.ButtonGroup><Button>Primary Action</Button><Button>Secondary 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 situllamcorper id. Aliquam luctus sed turpis felis nam pulvinar risuselementum.</CTABanner.Description><CTABanner.ButtonGroup><Button>Primary Action</Button><Button>Secondary Action</Button></CTABanner.ButtonGroup></CTABanner>
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 situllamcorper id. Aliquam luctus sed turpis felis nam pulvinar risuselementum.</CTABanner.Description><CTABanner.ButtonGroup><Button>Primary Action</Button><Button>Secondary Action</Button></CTABanner.ButtonGroup></CTABanner>
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 situllamcorper id. Aliquam luctus sed turpis felis nam pulvinar risuselementum.</CTABanner.Description><CTABanner.ButtonGroup><Button>Primary Action</Button><Button>Secondary Action</Button></CTABanner.ButtonGroup></CTABanner>
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 situllamcorper id. Aliquam luctus sed turpis felis nam pulvinar risuselementum.</CTABanner.Description><CTABanner.ButtonGroup><Button>Primary Action</Button><Button>Secondary Action</Button></CTABanner.ButtonGroup></CTABanner></ThemeProvider>)}render(<App />)
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 |
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 |
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.
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.
css | js |
---|---|
--brand-CTABanner-shadow-color-start | brand.CTABanner.shadow.color.start |
--brand-CTABanner-shadow-color-end | brand.CTABanner.shadow.color.end |