Call to Action

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.

Light Dark

Sale

Use sale Call to Action for off-price placements.

Light Dark

Brand

Use brand Call to Action as an alternative.

Light Dark

Elevated

Adds drop shadow to increase contrast and visibility of Call to Action when placed over an image.

Light Dark

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" but 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 via the keyboard. Don't manipulate 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

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

Foundation

Use uppercase for all words within a Call to Action

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 all caps for CTAs, not sentence case, title caps or all lowercase

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

If leading to a Brand/Category/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/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 a Call to Action. Do not style as a link

Do / Don't

Image showing proper Call to Action usage — Do

Image showing proper Call to Action paired with basic button — Don't

Image showing Call to Action with a brief label — Do

Image showing a Call to Action with a long label — Don't

Image showing standard size Call to Action — Do

Image showing a different sized Call to Action — Don't

Image showing standard Call to Action typography — Do

Image showing a Call to Action with different typography — Don't

Image showing standard Call to Action link style — Do

Image showing a Call to Action as a link — Don't

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.

Installation

Resources are available with the CdrCta package:

Component: @rei/cdr-cta
Component styles: cdr-cta.css

To incorporate the required assets for a component, use the following steps:

1. Install using NPM

Install the CdrCta package using npm in your terminal:

Terminal

npm i -s @rei/cdr-cta

2. Import Dependencies

main.js

// import your required CSS
import "@rei/cdr-cta/dist/cdr-cta.css";

1
2

3. Add Component to a Template

local.vue

<template>
...
  <cdr-cta href="rei.com"></cdr-cta>
...
</template>

<script>
import { CdrCta } from '@rei/cdr-cta';
export default {
  ...
  components: {
    CdrCta
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

CTA, CTA Button, CdrCta

Dark

Light

Sale

Brand

Elevated

Accessibility

Use When

Don't Use When

Foundation

Content

Behavior

Do / Don't

Props

Slots

Installation

1. Install using NPM

2. Import Dependencies

3. Add Component to a Template

Usage

Modifiers

1.1.0

1.0.3

1.0.2

1.0.1

1.0.0

Call to Action

CTA, CTA Button, CdrCta

# Dark

# Light

# Sale

# Brand

# Elevated

# Accessibility

Dark

Light

Sale

Brand

Elevated

Accessibility