Call to action

Overview Style Guidelines Code Demos Accessibility
  1. Usage
  2. rh-cta
  1. Usage
  2. rh-cta

Installation

Learn more about how to install on our getting started docs.

Red Hat CDN 
<script type="module">
  import '@rhds/elements/rh-cta/rh-cta.js';
</script>
Import Map Example 
<script type="importmap">
  {
    "imports": {
      "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.0.1/elements/",
    }
  }
</script>
 NPM 
npm install @rhds/elements
<script type="module">
  import '@rhds/elements/rh-cta/rh-cta.js';
</script>
 JSPM 
<script type="module">
  import '@rhds/elements/rh-cta/rh-cta.js';
</script>
Import Map Example 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-cta/rh-cta.js": "./elements/rh-cta/rh-cta.js"
  },
  "scopes": {
    "./": {
      "@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/",
      "@patternfly/pfe-core/ssr-shims.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/core.js",
      "@rhds/elements/rh-icon/rh-icon.js": "./elements/rh-icon/rh-icon.js",
      "@rhds/icons": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/icons.js",
      "@rhds/tokens/css/color-context-consumer.css.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0-next.15/css/color-context-consumer.css.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.0/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    },
    "https://ga.jspm.io/": {
      "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js",
      "@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/decorators/",
      "@patternfly/pfe-core/controllers/property-observer-controller.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/controllers/property-observer-controller.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.0/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.0/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.0/development/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    }
  }
}
</script>

Lightdom CSS shim

This element has an optional "Lightdom CSS" shim to help reduce Cumulative Layout Shift (CLS) experience before the element has fully initialized.

<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.

Warning

Lightdom CSS shims are an optional, temporary solution for reducing CLS. Delcarative Shadow DOM is the better solution, and once it is more widely available, Lightdom CSS shims will no longer be needed and will become deprecated.

Usage 

<rh-cta href="#default">Default</rh-cta>

rh-cta

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 32
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
Edit this page on GitHub