Skip to main content Red Hat Design System logo Contribute on Github v1.4.5

Call to action

Overview Style Guidelines Code Demos Accessibility

Installation

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

 
string | undefined
 
unknown
iconSet

Icon set

 
string
 
'far'
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 0

None
© 2021-2024 Red Hat, Inc. Deploys by Netlify