CTA Full Width

This component highlights information and allows users to action on that content. It is also used as a header for pages.

H1 with CTA Left Aligned

Image background - Optional description

CTA Label

H1 with CTA Left Aligned

CTA Label

H2 with CTA Left Aligned

Solid colour background - Optional description

CTA Label

H3 with CTA Left Aligned

Solid colour background - Optional description

CTA Label

H4 Left Aligned - No description

H5 Left Aligned - No description

H1 with CTA Center Aligned

Image background - Optional description

CTA Label

H1 with CTA Center Aligned

CTA Label

H2 with CTA Center Aligned

Solid colour background - Optional description

CTA Label

H3 with CTA Center Aligned

Solid colour background - Optional description

CTA Label

H4 Center Aligned - No description

H5 Center Aligned - No description

Usage Criteria

This component highlights information that we want the user to read and also provides an actionable link if the user is interested. This component is suitable for information with shorter copy.

Do's and Don'ts

  • Do not use this component for very long content.
  • Do not stack multiples of this component directly on top of one another. If there is more than one on a page, please have them side by side on the same row, or have some dividing content in between the components.

Design Notes

As mentioned in the Usage Criteria, this component is good for pushing information we want users to read, and we can use the CTA to allow them to dive deeper into that content or perform an action. However, not including the CTA can make the component a good choice for presenting statements or facts.

Variations of this component using the H1 header are used as page headers.

Configurable Options

This component can be configured with an optional CTA, where the CTA Link to needs to be specified. The layout can also be configured to have an image background or solid colour background, and the text position changed (left, right, center).

Developer Notes

Type Name
AEM Component Name CTA Full Width
Code Base Name  
resourceSupertype  
SCSS Attributes  
JavaScript  
Status  
Version