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>

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
DOM Property Description Type Default
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

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

 
string | undefined

unknown
download

when href is set, the link's download attribute

 
string | undefined

unknown
referrerpolicy

when href is set, the link's referrerpolicy attribute

 
string | undefined

unknown
rel

when href is set, the link's rel attribute

 
string | undefined

unknown
target

when href is set, the link's target attribute

 
string | undefined

unknown
icon

Icon name

 
IconNameFor<IconSetName> | undefined

unknown
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