Call to action

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Installation
  2. Usage
  1. Installation
  2. Usage

Installation

We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.

Red Hat CDN 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.1.2/elements/",
  }
}
</script>
Copy to Clipboard Wrap lines NPM 
npm install @rhds/elements
Copy to Clipboard Wrap lines JSPM 
<script type="importmap">
Could not generate import map using JSPM: Cannot read properties of undefined (reading '@rhds/elements')
</script>
Copy to Clipboard Wrap lines

Add it to your page with this import statement

<script type="module">
  import '@rhds/elements/rh-cta/rh-cta.js';
</script>
Copy to Clipboard Wrap lines

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 Wrap lines

rh-cta

A call to action is a styled link that entices users to make a selection.

Slots 1
Slot Name Description
undefined

The default slot contains the link text when the href attribute is set. In case there is no href attribute, an anchor tag (<a href="...">) should be the first child inside rh-cta element. Less preferred but allowed for specific use-cases include: <button> (note however that the button tag is not supported for the default CTA styles).
Attributes 8
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.

  • Primary: Use for the primary or most important link. This variant is the highest in hierarchy and can also be used to play a video in a Modal or large container.
  • Secondary: Use for secondary or general links. This variant is lower in hierarchy than the Primary variant and can be used multiple times in the same container or layout.
  • Brick: Use to group links together. Only the Brick variant can stretch to fit a container or grid, otherwise the text label padding in other variants stays the same.
  • Default (no variant): Use for tertiary or the least important links. This variant is the lowest in hierarchy and can be used multiple times in the same container or layout.
 
'primary' | 'secondary' | 'brick' | undefined
 
unknown
href href

When set, overrides the default slot. Use instead of a slotted anchor tag

 
string | undefined
 
unknown
download download

when href is set, the link's download attribute

 
string | undefined
 
unknown
referrerpolicy referrerpolicy

when href is set, the link's referrerpolicy attribute

 
string | undefined
 
unknown
rel rel

when href is set, the link's rel attribute

 
string | undefined
 
unknown
target target

when href is set, the link's target attribute

 
string | undefined
 
unknown
icon icon

Icon name

 
IconNameFor<IconSetName> | undefined
 
unknown
icon-set iconSet

Icon set

 
IconSetName
 
'ui'
Methods 0
None
Events 0
None
CSS Shadow Parts 1
Part Name Description
container

container element for slotted CTA
CSS Custom Properties 20
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
Design Tokens 31
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-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
Edit this page on GitHub