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>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>rh-cta
Provides a styled link or button for prominent user actions when you need to
draw attention to a key interaction. Must contain an href attribute or a
slotted <a> / <button>. Screen readers announce the slotted text. Used
primarily for linking to other pages. Users should prefer to use the href
attribute or slotted links with this component. Avoid <button> with the
default (no variant) style.
Slots
| Slot Name | Summary | Description |
|---|---|---|
[default]
|
CTA link text |
Slot an anchor or button as the first child, or set href on the host. Screen readers
announce this content as the CTA label. For long words, supply wbr at appropriate break points. |
Attributes
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
variant
|
variant |
Visual importance: |
|
|
href
|
href |
URL for the CTA link. Renders an internal |
|
|
download
|
download |
Triggers a file download when |
|
|
referrerpolicy
|
referrerpolicy |
Referrer policy when |
|
|
rel
|
rel |
Link relationship when |
|
|
target
|
target |
Browsing context when |
|
|
icon
|
icon |
Icon name. Overrides the default trailing arrow, or displays before text in brick variant. |
|
|
icon-set
|
iconSet |
Icon set to load from. Defaults to |
|
|
Methods
| Method Name | Description |
|---|---|
scheduleUpdate()
|
|
firstUpdated()
|
Events
None
CSS Shadow Parts
| Part Name | Summary | Description |
|---|---|---|
container
|
container element for slotted CTA |
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--rh-icon-size |
Trailing icon dimensions |
var(--rh-font-size-body-text-lg, 1.125rem)
|
--rh-cta-focus-text-underline-offset |
Focus text underline offset |
var(--rh-cta-hover-text-underline-offset)
|
--rh-cta-focus-container-outline-color |
Container outline color on keyboard focus |
var(--rh-cta-focus-outline-color)
|
--rh-cta-focus-outline-color |
Inner focus indicator outline color |
—
|
--rh-cta-hover-text-underline-offset |
Hover text underline offset |
—
|
--rh-cta-font-size-priority |
Primary and secondary variant font size |
var(--rh-font-size-body-text-md, 1rem)
|
--rh-cta-focus-container-background-color |
Container background color on focus |
#73bcf740
|
--rh-cta-active-container-background-color |
Default active container background |
#73bcf740
|
--rh-cta-focus-background-color |
Default focus background Primary variant focus background Secondary variant focus background on light color schemes Secondary variant focus background on dark color schemes |
var(--rh-color-surface-dark, #383838)
|
--rh-cta-active-color |
Secondary variant active text color |
var(--rh-color-text-primary)
|
--rh-cta-background-color |
Default background color Primary variant background color Secondary variant background color Brick variant background color |
transparent
|
--rh-cta-border-color |
Default border color Primary variant border color Secondary variant border color Brick variant border color |
var(--rh-color-border-subtle)
|
--rh-cta-color |
Default text color Primary variant text color Primary variant active text color Secondary variant text color on light color schemes Secondary variant text color on dark color schemes Brick variant text color |
var(--rh-color-interactive-primary-default)
|
--rh-cta-hover-background-color |
Default hover background Primary variant hover background Secondary variant hover background on light color schemes Secondary variant hover background on dark color schemes Brick variant hover background on light color schemes Brick variant hover background on dark color schemes |
var(--rh-color-surface-darker, #1f1f1f)
|
--rh-cta-hover-border-color |
Default hover border color Primary variant hover border color Secondary variant hover border color Brick variant hover border color |
var(--rh-color-border-subtle)
|
--rh-cta-hover-color |
Default hover text color Primary variant hover text color Secondary variant hover text color on light color schemes Secondary variant hover text color on dark color schemes Brick variant hover text color |
var(--rh-color-interactive-primary-hover)
|
--rh-cta-hover-text-decoration |
Default hover text decoration Brick variant hover text decoration on light color schemes Brick variant hover text decoration on dark color schemes |
underline
|
--rh-cta-focus-color |
Default focus text color Primary variant focus text color Brick variant focus text color |
var(--rh-color-interactive-primary-default)
|
--rh-cta-focus-border-color |
Default focus border color Primary variant focus border color Secondary variant focus border color Brick variant focus border color |
var(--rh-color-border-subtle)
|
--rh-cta-focus-inner-border-color |
Default focus inner border color Primary variant focus inner border color Secondary variant focus inner border color Brick variant focus inner border color |
var(--rh-color-border-subtle)
|
--rh-cta-focus-text-decoration |
Default focus text decoration Primary variant focus text decoration Secondary variant focus text decoration Brick variant focus text decoration on light color schemes Brick variant focus text decoration on dark color schemes |
none
|
--rh-cta-active-background-color |
Primary variant active background color Secondary variant active background on light color schemes Secondary variant active background on dark color schemes Brick variant active background on light color schemes Brick variant active background on dark color schemes |
var(--rh-color-surface-darker, #1f1f1f)
|
--rh-cta-active-inner-border-color |
Default active inner border color Primary variant active inner border color Secondary variant active inner border on light color schemes Secondary variant active inner border on dark color schemes Brick variant active inner border color |
var(--rh-color-border-subtle)
|
--rh-cta-active-text-decoration |
Default active text decoration Brick variant active text decoration on light color schemes Brick variant active text decoration on dark color schemes |
underline
|
Design Tokens
| Token | Description | Copy |
|---|---|---|
--rh-font-family-heading
|
Container typeface Heading font family |
|
--rh-line-height-body-text
|
Container line height Line height for body text |
|
--rh-font-size-body-text-lg
|
Container text size 18px font size |
|
--rh-animation-speed
|
Arrow slide animation duration |
|
--rh-animation-timing
|
Arrow slide animation easing |
|
--rh-border-width-md
|
2px border width: Example: Alert |
|
--rh-border-radius-default
|
Container border radius 3px border radius; Example: Card |
|
--rh-border-width-sm
|
Container border thickness Inner border thickness 1px border width; Example: Secondary CTA or Button |
|
--rh-space-2xl
|
32px spacer |
|
--rh-space-lg
|
16px spacer |
|
--rh-space-xl
|
24px spacer |
|
--rh-font-size-body-text-md
|
16px font size |
|
--rh-color-brand-red
|
|
|
--rh-color-brand-red-dark
|
Dark brand red/Brand red hover |
|
--rh-color-surface-darkest
|
Primary surface (dark theme) |
|
--rh-color-text-primary-on-dark
|
Primary text color for dark theme |
|
--rh-color-text-primary-on-light
|
Primary text color for light theme |
|
--rh-color-surface-dark
|
Tertiary surface (dark theme) |
|
--rh-color-text-primary
|
|
|
--rh-color-border-strong
|
|
|
--rh-color-surface-lightest
|
Primary surface (light theme) |
|
--rh-color-surface-light
|
Secondary surface (light theme) |
|
--rh-color-border-strong-on-light
|
Strong border color (light theme) |
|
--rh-font-family-body-text
|
Brick variant typeface Body text font family |
|
--rh-font-weight-body-text-regular
|
Brick variant font weight Regular font weight |
|
--rh-space-md
|
Arrow icon inline start margin Variant icon inline start margin Brick variant content gap 8px spacer |
|
--rh-color-interactive-primary-hover
|
|
|
--rh-color-interactive-primary-default
|
|
|
--rh-color-surface-lighter
|
Tertiary surface (light theme) |
|
--rh-color-surface-darker
|
Secondary surface (dark theme) |
|
--rh-color-border-subtle
|
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
