Call to action
On this page
On this page
Overview
A call to action is styled text representing a link.
Edit element properties
import '@rhds/elements/rh-cta/rh-cta.js';
<rh-cta href="#">Call to Action</rh-cta>
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.
When set, overrides the default slot. Use instead of a slotted anchor tag
when href
is set, the link's download
attribute
when href
is set, the link's referrerpolicy
attribute
when href
is set, the link's rel
attribute
when href
is set, the link's target
attribute
Icon name
Icon set
Status
What do these mean?
- Figma library:
-
Ready - RH Elements:
-
Ready - RH Shared Libs:
-
Ready
When to use
- Apply specific styling to interactive text
- Entice users to select a link
- Allow users to navigate to a different page or domain
Status checklist
Property | Status | Meaning |
---|---|---|
Figma library |
|
Component is available in the Figma library |
RH Elements |
|
Component is available in the RH Elements repo |
RH Shared Libs |
|
Component is available in the RH Shared Libs repo |
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.