Buttons
Standard CTA Link
When to use
Use a button for an important action that will change the state of the website or capture data from the user. There can be multiple instances of this on a page in addition to the primary button.
Standard CTA Button
When to use
See above
Standard CTA Link with Icon
When to use
Used when the download action is not the main call-to-action.
Standard CTA Button with Icon
When to use
See above
Primary CTA Link
When to use
Used for the main action on a page. Not every page needs to have one, but there should not be more than one on any given page.
Developer notes
Always has an icon. You may modify an icon by replacing cta--next with cta--buspass.
Primary CTA Button
When to use
See above
Developer notes
Always has an icon. You may modify an icon by replacing cta--next with cta--buspass.
Primary CTA Link with Icon
When to use
Only to be used when download is the primary call-to-action on the page. Hover etc as per Primary Button, but the icon doesn't move.
Primary CTA Button with Icon
When to use
See above
CTA Group
When to use
Used when there is a main CTA with an alternative (and less important) option link
Primary CTA Twin Buttons
When to use
This should only be used when the primary call-to-action is 'split' into two different paths of equal importance.
CTA Link Disabled
When to use
This is used when the user has clicked the button and something is loading/processing.
CTA Button Disabled
When to use