Stylized link used in campaigns and promotions to encourage users to further explore featured products, services or offers
Use dark Call to Action over a light background image or color to provide proper contrast. This is the default Call to Action style.
Use light Call to Action over a dark background image or color to provide proper contrast.
Use sale Call to Action for off-price placements.
Use brand Call to Action as an alternative.
Use elevated Call to Action to add drop shadow to increase contrast and visibility when placed over an image.
Displays at full width of its container.
To ensure that usage of this component complies with accessibility guidelines:
aria-label
might read: "Shop our <specific advertising category> now"cdr-sr-only
class<cdr-cta>
Start here <span class="cdr-sr-only">for help finding the proper sleeping bag</span>
</cdr-cta>
href
attribute. Empty href
attributes are not considered true linksThis component has compliance with WCAG SC 1.4.3: Contrast (Minimum) (opens new window), however, do the following:
Call to Action exists as a means to navigate users to a new location or additional information:
To construct consistent and universal Call to Actions across the site:
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' }
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.
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:
The following variants are available to the cdr-cta
modifier attribute:
Value | Description |
---|---|
'elevated' | Adds drop shadow to button |