Call to Action

Overview

A Call to action is a styled link that directs a user to other pages or sometimes displays hidden content.

Sample Elements

Demos

View a live version of this component and see how it can be customized.

View the <rh-cta> demo in a new tab

Usage

Call to action links are best used to entice a user to make a selection. For example, use the Primary variant to bring attention to an important link or use the Brick variant to group links together in a grid.

Hierarchy

Call to action links are ordered by hierarchy from left to right (large screens) or left to right and top to bottom (small screens). They can be used multiple times in the same container except for the Primary variants.

Navigation vs. action

Even though they look similar, call to action links and buttons have important differences. Call to action links are navigational elements whereas buttons perform actions.

• Call to action links are used in layouts (like the home page) whereas buttons are used in components (like a Form).
• Call to action link text labels are larger and thicker than button text labels.
• Call to action links with containers include more padding than buttons with containers.
• Call to action link colors have different meanings than button colors.

Content

Call to action links are navigational elements, so any text needs to accurately communicate the destination. Inconsistent experiences might lead to distrust, lessening the satisfaction of a user during their journey. Call to action link text labels should be action-oriented yet straightforward so a user will feel comfortable making a selection.

Character count

Call to action link text labels should have fewer characters in order for their message to remain impactful for a user.

Variant grouping

Variants can be grouped together if there are different kinds of links that need to be displayed in the same container.

Buttons

Do not use a call to action link to trigger an action, like submitting a form or changing a state.

Brick (icon)

When grouping Brick (icon) variants, different icons can be used to communicate different topics, but they all must be the same style, color, and height.

Primary (white)

The Primary (white) variant can be used if the red variant conflicts with other elements or violates accessibility standards.

Best practices

Changing styles

Do not modify the styles of any variant for any reason.

Too many links

Do not group more than three variants together otherwise a user might have trouble making a selection if there are too many link choices.

Using multiple Primary variants

Do not use multiple Primary variants in the same group, use of that variant is reserved to represent the most important link.

Mixing variant groups

Do not group more than two variants together anywhere.

Mixing Bricks

Do not group different Brick variants together anywhere, use one only.

Changing hierarchy

Do not change the hierarchy when grouping, variants that are higher in hierarchy should go first.

Stretching

Do not stretch any other variants to fit a container or grid, only the Brick variants can stretch.