Call to Action

Stylized link used in campaigns and promotions to encourage users to further explore featured products, services or offers

# Overview

# Dark

Use dark Call to Action over a light background image or color to provide proper contrast. This is the default Call to Action style.

# Light

Use light Call to Action over a dark background image or color to provide proper contrast.

# Sale

Use sale Call to Action for off-price placements.

# Brand

Use brand Call to Action as an alternative.

# Elevated

Use elevated Call to Action to add drop shadow to increase contrast and visibility when placed over an image.

# Full Width

Displays at full width of its container.

# Accessibility

To ensure that usage of this component complies with accessibility guidelines:

  • Clearly and concisely describe the link’s destination when the button is clicked or tapped:
    • For example, if the button text is "Shop now", the aria-label might read: "Shop our <specific advertising category> now"
  • Avoid using "click here" or "start here". If screen space for text is minimal:
    • Provide text that can be read by screen readers
    • Use an inline element for hidden text with the cdr-sr-only class
    <cdr-cta>
      Start here <span class="cdr-sr-only">for help finding the proper sleeping bag</span>
    </cdr-cta>
    
    1
    2
    3
  • Ensure screen readers can find all Call to Action buttons on a page by:
    • Always providing an href attribute. Empty href attributes are not considered true links
    • Ensuring that it can be accessed using the keyboard. Avoid manipulating the default tab index

This component has compliance with WCAG SC 1.4.3: Contrast (Minimum), however, do the following:

  • Choose the light button theme for a dark background or the dark button theme for a light background
  • Test color contrast for button themes against all backgrounds

# Guidelines

# Use When

  • Encouraging a user to navigate to a new location
  • Promoting a campaign, promotional advertisements, or email offers

# Don't Use When

  • Triggering interface interactions. Instead, use Buttons

# Content

Call to Action exists as a means to navigate users to a new location or additional information:

  • Use clear and concise text
  • Make it clear what happens when this link is clicked or tapped. For example, “Shop backpacking” Call to Action on a homepage would navigate the user to an assortment of backpacking-related products available for purchase
  • Use sentence case. Do not use all caps, title caps, or all lowercase

To construct consistent and universal Call to Actions across the site:

  • If leading to a Brand, Category, or Activity Landing page, UI text for Call to Action should be Explore Brand/Category/Activity Name
  • If leading to a Product Detail page, UI text for Call to Action should be Shop product name
  • If leading to a Collection or search result, UI text for Call to Action should be Shop all Brand/Category/Activity Name

# Behavior

  • Avoid combining a Call to Action with a basic button. Disabling Call to Actions is not semantically supported
  • Maintain button styling including typographic and sizing for Call to Action. Do not style as a link

# Do / Don't

Image showing proper Call to Action usage
Do use Call to Action to lead users to explore more.
Image showing proper Call to Action paired with basic button
Don't mix Call to Action and basic buttons.

Image showing Call to Action with a brief label
Do write brief and concise labels.
Image showing a Call to Action with a long label
Don't write long labels.

Image showing standard size Call to Action
Do maintain standard size.
Image showing a different sized Call to Action
Don't alter the button size.

Image showing standard Call to Action typography
Do maintain standard typography.
Image showing a Call to Action with different typography
Don't alter standard typography.

Image showing standard Call to Action link style
Do maintain standard button-like styles.
Image showing a Call to Action as a link
Don't style as a link.

# API

# Props

ctaStyle

name

string

type

"brand"

default

Sets Call to Action color by changing ctaStyle to match different themes. Possible values: { 'brand' | 'dark' | 'light' | 'sale' }

fullWidth

name

boolean

type

false

default

Sets Call to Action width to 100%. Setting this value to true will set the width to 100% of the parent container.

href

name

string

type

"#"

default

Sets the link using the page url.

modifier

name

string

type

N/A

default

Modifies the style variant for this component. Possible values: { 'elevated' }

# Slots

Find more information about using Slots in the article Getting Started as a Developer.

default

name

Sets the innerHTML for CdrCta. This is the readable text of the button.

# Usage

This example code renders a full width cdr-cta, with the elevated modifier and the sale theme.

<template>
  <cdr-cta
    href="https://rei.com"
    :full-width="true"
    cta-style="sale"
    modifier="elevated"
  >
    See our new gear!
  </cdr-cta>
</template>
1
2
3
4
5
6
7
8
9
10

The CdrCta component looks like a button, however it's actually an anchor:

  • Do not use when a button is preferable such as triggering an action
  • Do not assign the role of button
  • For basic links, use the CdrLink component

# Modifiers

The following variants are available to the cdr-cta modifier attribute:

Value Description
'elevated' Adds drop shadow to button