Call to action

Usage

Use a call to action to entice users into making a selection like clicking on a link. For example, use a Primary call to action to bring attention to something important or a Brick call to action if you need to arrange links together in a grid.

When to use a call to action

Using a call to action is a way to highlight a link that is used on its own instead of an inline link in a text block. It is commonly used as the last element in a group so users can read about something first and then proceed further if they are interested. Each page should have only one Primary call to action and any remaining calls to action should be represented as lower in hierarchy.

Call to action vs. button

Even though they look similar, a call to action is a link which takes users from one page to a different page whereas a button communicates and triggers actions on the same page. Use a button when the desired action is submitting a form, canceling a process, or creating a new object.

Variants

Each call to action has a specific function and the design of each variant signals that function to users. Therefore, it is important that each variant is implemented consistently so they communicate the correct actions.

Variant	Use case
Primary	Use only once per page for the primary or most important link
Secondary	Use several times on the same page for secondary or general links
Brick	Use several times on the same page to group links together in a grid
Default	Use several times on the same page for tertiary or less important links
Video	Triggers a video in a dialog (applies to Primary, Secondary, and Default variants only)

Disabled

To indicate that a link is currently unavailable, calls to action can become disabled.

Brick icons

When grouping Brick variants, icons can be paired with text labels to communicate various topics, but the icons must be the same color, height, style, etc.

Writing content

Call to action text labels

Call to action text labels should be more action-oriented than button text labels. When writing text labels, be specific and clearly communicate the task or destination by doing the following:

• Make sure the text is unique and easily understood for when screen readers announce text to users
• Always start the text label with a verb
• Use simple words and phrases
• Do not use multiple verbs
• Try to write short text labels or rearrange words when possible
• Do not use punctuation
• Do not use any other icons except for the ones that are included

Clarity of language

Text labels can be inviting as well as to the point, vague messaging does not help our users make informed decisions.

Long text labels

Users do not want to spend more time reading than necessary, so write text labels with as few words as possible.

Long text labels will break to two lines on small breakpoints or when translated to certain languages. This can be avoided by writing less text.

Warning

The arrow icon in the Default variant should always be connected to at least one word on the same line.

Call to action vs. button text labels

Call to action text labels are written to entice users to select a link whereas button text labels are written to be short and communicate an action.

Character count

The recommended maximum character count for the variants of a call to action are listed below and include spaces.

Variants	Character count
Primary	30
Secondary	40
Brick	25
Default	55

Layout

Heirarchy

Calls to action are ordered by hierarchy with the Primary variant being the most important. Variants that are lower in hierarchy can be used more than one time per page.

Placement

Calls to action can be placed in a variety of layouts including cards, grids, lists, and more. It is commonly used as the last element in a group so users can read about something first and then proceed further if they are interested.

Grouping

Call to action variants are ordered by hierarchy with Primary being the highest. Variants that are lower in hierarchy can be grouped with Primary as well as used more than once per page.

Bricks

Brick variants are flexible and can stretch to fit different column widths.

Warning

Long text labels will break to two lines, therefore write no more than two or three words per Brick variant.

Space in groups

Horizontal and vertical spacing between Primary and Secondary variants is 24px.

Helpful tip

Spacing guidance between calls to action and text or other elements are on the Spacing page.

Horizontal and vertical spacing between the Default variant is 24px.

Horizontal and vertical spacing between Brick variants should be the same as grid gutters.

Behavior

Hiding or revealing content

A Brick variant can hide and reveal a panel of content when selected like an accordion. However, only one Brick variant can be selected at a time like tabs.

Responsive design

On large breakpoints, calls to action are ordered by hierarchy from left to right in one row. On small breakpoints, if calls to action have long text labels, a second row appears.

Best practices

Changing styles

Do not change the styles of any variant.

Primary variants

Do not use more than one Primary variant on any page.

Brick variants

Do not group different Brick variants together, use one variant per grid.

Grouping

Do not group more than two different variants together.

Changing heirarchy

Do not change the hierarchy, variants that are higher in hierarchy should start first on the left.

Helpful tip

Hierarchy should be reversed when using right-to-left languages.

Too many options

Do not group more than three variants together otherwise the risk of choice paralysis greatly increases.

Stretching

Do not add extra spacing or stretch the width of any variant except for Bricks.

Related elements or patterns

• Button
• Link
• Link with icon