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 JSPM

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 Methods 0 Events 0 CSS Shadow Parts 1 CSS Custom Properties 20 Design Tokens 32
Edit this page on GitHub