Call to Action

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

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.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Light

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

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Sale

Use sale Call to Action for off-price placements.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Brand

Use brand Call to Action as an alternative.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Elevated

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

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

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