import {CTABanner, Button} from '@primer/react-brand'Examples
Default
Variants
Balanced
CTABanner.Image child is required in this variant.Minimal
CTABanner.Image is not supported in this variant and will not be rendered.Alignment
The content alignment can be changed using the align prop on the root CTABanner. This can be configured to either start or center.
Optional background image
Optional background colors
CTABanner supports default, subtle and arbitrary background-color values
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.
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.
Remove shadow
The shadow can be removed using the hasShadow prop. This will render the component without the background shadow.
Shadow color customization
The default shadow colors can be customized through their respective CSS variables.
Component props
CTABanner Required
| name | type | default | required | description |
|---|---|---|---|---|
children | ReactNode, ReactNode[] | undefined | true | Content to include within the banner component |
variant | 'default', 'balanced', 'minimal' | 'default' | false | Alternative layout presentations |
align | 'start', 'center' | 'center' | false | 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 |
hasGridLines | boolean | false | false | Enables optional gridlines appearance |
hasShadow | boolean | false | 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' | '3' | false | Visual heading size, irrespective of level. Note: balanced and minimal variants override the visual size through CSS. |
CTABanner.Description
| name | type | default | required | description |
|---|---|---|---|---|
children | ReactNode, ReactNode[] | undefined | true | Content to be displayed inside the banner component |
variant | 'default', 'muted', 'subtle' | 'muted' | false | 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.
CTABanner.Image
| name | type | default | required | description |
|---|---|---|---|---|
src | string | undefined | true | The image source URL |
alt | string | undefined | true | Accessible alternative text for the image |