Call to action

A Call to Action (CTA) provides a small amount of text information, formatted as a link to influence users to interact with it.

Block setup

Elements to consider when building a Call to action:

Single CTA

Single CTAs can be added to a page.

Group of CTAs

Groups of CTAs can be added to a page. Only one theme (colour) can be chosen for all CTAs in a group.

Multiple CTAs

Multiple CTAs can be added to a page. It is recommended that they are added as a group within the same Block to keep sizing consistent. All CTAs can have individually chosen themes (colours).

Requirements

CTA supports both internal and external links, web and email links

  • One link and at least one font type must be used:
    • Small type: white, thin, capitalized
    • Medium type: white, bold, capitalized
    • Big type: yellow, regular, sentence case by default but can manually capitalize; colour is dependent on chosen theme

Section layout

CTAs can be added in any section width and the CTA will automatically be adjusted to fit the width of the section.

Block examples

Single CTA

  • The CTA is placed within an Extra Wide width section
  • White text is using Medium type; Yellow text is using Big type
  • The default Black and gold (UWaterloo) colour theme has been used

Group of CTAs

  • Three CTAs grouped together in a single Block within an Extra Wide width section
    • a group of three renders as three across on a wide screen
  • An example of Small, Medium and Large type, respectively
  • The Grey (neutral) colour theme has been used

Multiple CTAs in one block

  • Multiple CTAs placed within one Block in an Extra Wide width section
  • Faculty colour themes will display when Big type is used, as well as when hovering over the CTA