Call-to-Action

Use a call-to-action to prompt a user to take a specific action to access a service or program. This design component combines one or two descriptive sentences with a blue button linked to transactional content, such as an application, a form or a survey.

Criteria

  • Only one call-to-action per page.

  • The call-to-action must be the primary action on a page.

  • It should always be located at the top of the page below the H1.

  • If both the highlight and call-to-action are used on the same page, the call-to-action must appear above the highlight.

  • Do not use a call-to-action on menu pages, unless the action applies to all content within that section.

  • Avoid banner images on standard pages with call-to-actions.

  • Do not include any hyperlinks in the description. The only hyperlink is within the button.

  • Do not use to link to informational content. Can only be used to link to transactional content, such as a form, application or survey.

  • No headings, bullets, images/logos, bolding or italics.

  • Must not be used inside accordions or tabs.

  • Description must not be no more than 300 characters in length, including spaces.

  • Description must be written in sentence case.

  • Button text must be three words maximum, be actionable, and written in title case, for example: Adopt a Pet, Complete a Survey or Submit an Application.

Version 2.02 . March 2024 . City of Toronto Web Standards