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.With logo
Use CTABanner.Logo to display a brand mark above the heading.
With link
Use CTABanner.Link to provide a secondary call-to-action as a text link instead of a button.
Duotone heading text
Wrap part of a heading in a <b> tag to apply the duotone emphasis color.
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. Wrap text in <b> to apply duotone emphasis. |
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: the minimal variant defaults the visual size to '6' when not provided. |
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 |
CTABanner.Logo
| name | type | default | required | description |
|---|---|---|---|---|
children | ReactNode | undefined | true | The logo to display, typically an inline SVG so it can be styled and stay accessible. |
CTABanner.Link
| name | type | default | required | description |
|---|---|---|---|---|
children | ReactNode | undefined | true | The link text |
href | string | undefined | true | The link target URL |
variant | 'default', 'accent' | 'accent' | false | Visual variant. Defaults to accent inside CTABanner |