C09. CTA Buttons

13 Dec 2021

Component finalised

@Japneet Kaur (Deactivated) @Steven Mao (Unlicensed)

BR-1

The CTA buttons component may be used inside of other components (e.g. the action banner)

BR-2

This component can also be used across other various areas of the website

BR-3

The contents of the CTA component must be manually authored

BR-4

Different variations of the CTA button should be supported as per the designs.

1

CTA Button 

Button / Link

N

On load:

• Primary:

  • CTA button is displayed as per the styleguide for the brand

• Secondary

  • CTA button is displayed as per the styleguide for the brand 

On hover:

• Primary:

  • CTA Button is displayed as per the style guide for the brand 

• Secondary:

  • CTA Button is displayed as per the style guide for the brand 

On click:  

• Navigates to the target destination/linked page

• Choice of two CTA Buttons can be selected in the CMS

• Link for CTA Button is managed in the CMS

• For mobile, CTA buttons will cover the length of the screen and buttons will stack (primary on top, secondary beneath) 

• If only one button is selected, only a Primary button should be selected by the CMS editor 

• Primary

• Secondary

2

CTA Button Text

Text

Y

On Load:

• text is displayed as per style guide for the brand

On hover: 

• text changes colour as per style guide for the brand 

On click: 

• text changes colour as per style guide for the brand 

• CTA Button Text is mandatory when a CTA Button is used

• Managed in the CMS 

-

3

Tertiary Link

Text / Link (w/ arrow) 

Y

On load:

• Text and arrow displayed as per style guide

On hover:

• Text colour changes as per style guide

On click:

• Text colour changes as per style guide for the brand and text is underlined

• Navigates to the specified target page

• Managed in the CMS

• Arrow is displayed by default

Tertiary