Toggle menu

Call to actions (CTA)

Inline CTAs

CTA

Primary CTA

Secondary CTA

CTA Primary CTA Secondary CTA

Legacy styled CTAs

Primary CTA

Secondary CTA

Primary CTA Secondary CTA

 

When to use a CTA link

  • Primary call to action links are to encourage the most desired action you want user to take.
  • Secondary call to action links are to provide an alternative action for the users to take.

CTA styleFont sizeFont weightFont colourBackground colourFont family
Primary1.125em/18px700#FFFFFFDefault #266427, Hover #183f19

"lato",Arial,Helvetica,sans-serif

Secondary1em/16px700#111111Default #ffffff, Hover #e6e6e6

"lato",Arial,Helvetica,sans-serif