Calls to action

Every Content Block, regardless of its source, can have unique calls to action appended to it. A call to action (CTA) is a button used to drive users in a specific direction toward completing a task, like this:

CTAs are not a replacement for links or lists of links. CTAs should meet the following criteria before being inserted into a page:

  1. Action-oriented. Use imperative verbs ("Sign up", "Make an appointment", "Donate").
  2. Brief. Use only a few words at most. Buttons and sentences don't mix. 
  3. Clear in their language and intent. The user should know exactly what they'll get when they click on a CTA button.

Be strategic! If you fill your page with buttons your users could find it difficult to focus.

Create CTA buttons

Creating a call to action in Cascade
  1. Expand the Call to action group at the bottom of your Content Block
  2. Choose your Action type
  3. Choose your button Size (Normal is recommended and is the same text size as your content)
  4. Enter the text Label for your button
  5. Choose where the action will link to (a Page from your site, a File/Document from your site, or an external website address)

Add additional CTAs to the same Content Block by clicking the green Plus icon under the Section > Content Block > Call to action label.

Action types

Choose your action type based on its context and purpose. Colour has meaning for users, and choosing an action type for its colour alone (e.g. to match the colours in an image) could be misleading.

Action type When to use
Primary actions are the dominant actions your users should take (eg. Apply, Register). You would not typically want more than one primary action per section, and it is recommended to keep the number of primary actions to a minimum on each page in general. If everything is primary, nothing is primary. Use strategically!
Secondary actions can be used next to a primary action or as an alternative to a primary action (eg. on dark backgrounds, these buttons may have more contrast).
Warning actions should be used when the action requires caution from the user (eg. Edit, Change). Do not use Warning for positive actions.
Danger actions should be used when the action is potentially dangerous for the user (eg. Delete, Remove). Do not use Danger for positive actions.
Info actions should be used when the action is informational (eg. Help).
Success actions should be used within Success-style alerts.

Alerts and Fine print

Alerts and fine print use colour to help convey meaning and importance in your content. Any Content Block can be made into an alert or fine print.

Hey there. This is an example of an alert.

Create an alert or fine print

  1. Choose Alert (or Fine print) as the Content purpose of your Content Block
  2. Choose the appropriate Alert type for your needs (Fine print does not have additional options)

Alert and fine print types

Info: Use this alert to communicate general or helpful information to a user.

Warning: Use this alert to warn the user of something extra important, or to inform them to be cautious about something.

Danger: Use this alert to communicate something critical, dangerous or erroneous. Don’t overuse Danger alerts or you’ll be crying wolf!

Success: Use this alert to communicate something successful or positive to a user.

Fine print: Use fine print to communicate supplementary information to a user.

Combining actions and alerts

Keep your action and alert types in synch when combining actions and alerts. For example, if you want a button inside a Warning-type alert, make that button a Warning type, too.

Do this

This is a positive Success-type alert.

Don't do this

This is a negative Danger-type alert.