Call to action
Importing
Add rh-cta to your page with this import statement:
<script type="module">
import '@rhds/elements/rh-cta/rh-cta.js';
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
To learn more about installing RHDS elements on your site using an import map read our getting started docs.
Lightdom CSS shim
Warning
Lightdom CSS shims are an optional, temporary solution for reducing CLS. Learn more about lightdom CSS shims .
<link rel="stylesheet" href="/path/to/rh-cta/rh-cta-lightdom-shim.css">
Note
Replace /path/to/
with path to the CSS file, whether local or CDN.
Usage
<rh-cta href="#">Call to Action</rh-cta>
<script type="module">
import '@rhds/elements/rh-cta/rh-cta.js';
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
rh-cta
A call to action is a styled link that entices users to make a selection.
Slot Name | Description |
---|---|
undefined |
The default slot contains the link text when the |
Attribute | DOM Property | Description | Type | Default |
---|---|---|---|---|
variant |
variant |
Indicates the importance of this call-to-action in the context of the page. Will also influence how the call-to-action is styled.
|
|
|
href |
href |
When set, overrides the default slot. Use instead of a slotted anchor tag |
|
|
download |
download |
when |
|
|
referrerpolicy |
referrerpolicy |
when |
|
|
rel |
rel |
when |
|
|
target |
target |
when |
|
|
icon |
icon |
Icon name |
|
|
icon-set |
iconSet |
Icon set |
|
|
Method Name | Description |
---|---|
scheduleUpdate() |
Part Name | Description |
---|---|
container |
container element for slotted CTA |
CSS Property | Description | Default |
---|---|---|
--rh-cta-color |
Sets the cta color |
var(--rh-color-text-primary-on-dark, #ffffff)
|
--rh-cta-background-color |
Sets the cta background color |
var(--rh-color-brand-red-on-light, #ee0000)
|
--rh-cta-border-color |
Sets the cta border color |
var(--rh-color-brand-red-on-light, #ee0000)
|
--rh-cta-hover-color |
Sets the cta color on hover |
var(--rh-color-text-primary-on-dark, #ffffff)
|
--rh-cta-hover-background-color |
Sets the cta background color on hover |
var(--rh-color-brand-red-dark, #be0000)
|
--rh-cta-hover-border-color |
Sets the cta boder color on hover |
var(--rh-color-brand-red-dark, #be0000)
|
--rh-cta-focus-color |
Sets the cta color on focus |
var(--rh-color-text-primary-on-dark, #ffffff)
|
--rh-cta-focus-background-color |
Sets the cta background color on focus |
var(--rh-color-brand-red-on-light, #ee0000)
|
--rh-cta-focus-container-background-color |
Sets the cta container background color on focus |
transparent
|
--rh-cta-focus-container-outline-color |
Sets the cta container outline color on focus |
#0066cc
|
--rh-cta-focus-border-color |
Sets the cta border color on focus |
transparent
|
--rh-cta-focus-inner-border-color |
Sets the cta inner border color on focus |
transparent
|
--rh-cta-active-color |
Sets the cta color on active. Applicable only for secondary variant |
var(--rh-color-text-primary-on-dark, #ffffff)
|
--rh-cta-active-background-color |
Sets the cta background color on active |
var(--rh-color-brand-red-dark, #be0000)
|
--rh-cta-active-container-background-color |
Sets the cta container background color on active. Applicable only for default variant |
#0066cc1a
|
--rh-cta-active-inner-border-color |
Sets the cta inner border color on active |
var(--rh-color-text-primary-on-dark, #ffffff)
|
--rh-cta-text-decoration |
Sets the cta text decoration |
none
|
--rh-cta-focus-text-decoration |
Sets the cta text decoration on focus |
none
|
--rh-cta-hover-text-decoration |
Sets the cta text decoration on hover |
none
|
--rh-cta-active-text-decoration |
Sets the cta text decoration on active |
none
|
Token | Copy |
---|---|
--rh-animation-speed
|
|
--rh-animation-timing
|
|
--rh-border-radius-default
|
|
--rh-border-width-md
|
|
--rh-border-width-sm
|
|
--rh-color-border-strong
|
|
--rh-color-border-strong-on-light
|
|
--rh-color-border-subtle
|
|
--rh-color-brand-red
|
|
--rh-color-brand-red-dark
|
|
--rh-color-interactive-primary-default
|
|
--rh-color-interactive-primary-hover
|
|
--rh-color-surface
|
|
--rh-color-surface-dark
|
|
--rh-color-surface-darker
|
|
--rh-color-surface-darkest
|
|
--rh-color-surface-light
|
|
--rh-color-surface-lighter
|
|
--rh-color-surface-lightest
|
|
--rh-color-text-primary
|
|
--rh-color-text-primary-on-dark
|
|
--rh-color-text-primary-on-light
|
|
--rh-font-family-body-text
|
|
--rh-font-family-heading
|
|
--rh-font-size-body-text-lg
|
|
--rh-font-size-body-text-md
|
|
--rh-font-weight-body-text-regular
|
|
--rh-line-height-body-text
|
|
--rh-space-2xl
|
|
--rh-space-lg
|
|
--rh-space-md
|
|
--rh-space-xl
|
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.