Call to Action

Overview Style Behavior Code Accessibility

Overview

Installation

npm install @rhds/elements

Slots

Default Slot

We expect an anchor tag, <a> with an href, to 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

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.
DOM Property
variant
Type
'primary' | 'secondary' | 'brick' | undefined
Default
unknown
icon
DOM Property
icon
Type
string | undefined
Default
unknown
color-palette

Sets color palette, which affects the element's styles as well as descendants' color theme. Overrides parent color context. Your theme will influence these colors so check there first if you are seeing inconsistencies. See CSS Custom Properties for default values

DOM Property
colorPalette
Type
ColorPalette | undefined
Default
unknown

Methods

None

Events

None

© 2021-2023 Red Hat, Inc. Deploys by Netlify
Scroll back to the top