# 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

# API

# Props

# Slots

# 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>

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: