CTA banner

Anatomy

• Heading: The main title of the CTA banner. It should be short and concise.
• Description: Short text that extends the information provided by the heading.
• Button group: The call to actions available to users

Usage

Use the CTA banner to draw attention around the main user actions. The CTA banner should be used sparingly and is typically placed at the bottom of the page to close the user journey, make a short summary of the page, and to persist the main actions. The CTA banner can also be used between other sections on lengthy pages.

The CTA banner can include primary and secondary actions. These actions are rendered as a button group and follow the same guidelines as the button group component.

The actions used in a CTA banner are normally the same as the ones used on the hero component on the top of the page. This repetition provides consistency and helps the user to remember what the main actions are.

Do

Use the CTA banner on the bottom of the page to close the user journey and reinforce the main actions.

Don’t

Don't use the CTA early on in the user journey, use a hero or a section intro component instead.

Options

Align

The CTA banner elements can be aligned to the start or center of the page. By default, the CTA banner is aligned to the start of the page. Use the center alignment if context calls for it. E.g. Use the left alignment if there's a background image on the right side of the page or center align if the CTA banner is placed between two sections that are centered aligned to not break the visual flow.

Styles

Background

The CTA banner uses a solid background color by default. This is the recommended style for most cases. However, the background can be removed to allow the content to blend with the background of the page.

Do

Use the background by default to ensure that the content is legible.

Don’t

Don't remove the background and keep the shadow, it will make the content hard to read.

Avoid using noisy or textured images that will make the content hard to read. Make sure that the combination of background and foreground guarantees compliance with WCAG contrast guidelines. Use an online contrast checker or a Figma plugin to test your contrast.

Do

Use background images or colors that guarantee optimal contrast between the background and the foreground.

Don’t

Don't use images that interfere with the legibility of the content.

Shadow

The CTA banner has a shadow around the component to give it a sense of depth and separation from the background.

Do

Remove the shadow and the background to diminish the sense of depth and separation from the background or to allow the content to blend with the background of the page.

Don’t

Don't use the shadow and the background together if you want the content to blend with the background and the sections that surround the CTA banner.

Border

The CTA banner can render a border around the component giving further separation between the foreground and background. This is especially useful when there is no shadow present on the background.

Do

Use the border only when there is no shadow present on the background.

Don’t

Don't use the border when there is a shadow present on the background. The shadow will provide enough separation between the foreground and background.

Related components

• BreakoutBanner: To break up content on longer pages and highlight important information.
• Hero: To display a large heading and a description with a button group.
• Section intro: To provide a title, description and a link to a new section in the page.
• River: To display a list of content items with a visual asset.