Links are navigational elements that allow a user to move between content, pages, and websites.
View a live version of the Call to action link and see how it can be customized.
There are two link variants available for use.
- Inline - An Inline link can be used inside of text or a paragraph and allows a user to take a less important action.
- Call to action - A Call to action link can be used solo or near content and allows a user to take an important action.
Each link variant has different styles depending on how they are used with or without content.
- Inline link - Text with or without color or an underline.
- External link - Text with an external link icon to the right.
- Primary or Secondary call to action link - Bolded text inside of a background or border container.
- Default call to action link - Bolded text with an arrow or icon to the right.
Visit the Call to action component page to see all available styles.
An Inline link can be applied to text used on its own at any size outside of a paragraph. When applied to text inside of a paragraph, it should match the size of the existing text.
Visit the Typography page to see available text sizes.
Visit the Call to action component page to see light theme examples.
Visit the Call to action component page to see dark theme examples.
Links should be applied when a user needs to jump to content on the same page, visit a page within the same domain, or visit a page within another domain.
Links are navigational elements, so any text needs to accurately communicate the destination. Inconsistent experiences might lead to distrust, lessening the satisfaction of a user during their journey. When writing link content, Inline links should be descriptive to help a user better understand the destination whereas Call to action links should be action-oriented to entice a user to make a selection.
Link content needs to be written clearly in order to be understood, therefore write no more than four or five words per link.
Photos or images can be links as long as there is supporting content nearby explaining that a selection can be made, like a headline, content, or Call to action link. Do not hide links in photos or images otherwise a user will miss the opportunity to make a selection if they cannot see the link.
Do not apply a link to an action that needs to be triggered instead, like submitting a form or changing a state.
In a form, selecting a button will trigger an action whereas selecting a link will direct a user to another page.
If a user selects a link within redhat.com, they should be directed to content within the redhat.com domain. In this situation, a new tab or window is not opened.
A user will be directed to another domain if they select an Inline link with an external link icon. For example, if a user needs to be directed to another website with different content or to complete a separate task, a new tab or window (depending on how their browser is configured) is opened so they may complete that task and then return to their original task.
Only Inline links can display an external link icon.
If navigating to a new page in the same tab is very disruptive to the experience or workflow, have the page open in a new tab or window instead.
Visit the Call to action component page to see available interaction states.
A popover trigger can be a linked text, or it can be an icon. For example, when a popover is needed near a form field, using the question mark icon as a trigger is common, but utilizing it is not always a requirement.
When the Tab key is pressed repeatedly, the focus highlights each Inline and Call to action link in order, from left to right and top to bottom.
|Tab||Moves the focus to the next link.|
|Shift + Tab||Moves the focus to the previous link.|
|Enter||Selects the link with focus.|
Both link variants mostly remain the same on large and small screens. Inline links will break to two lines if there is a lot of text in the paragraph.
Do not apply lots of links to paragraph text otherwise a user will have trouble reading the content in its entirety before making a selection.
Do not use different link variants to direct a user to the same page.
When writing link content, avoid ambiguous phrases or a full website URL. A user should have a clear idea of where they are being directed to before they make a selection.
Do not apply links to long strings of text.
Buttons have different use cases and should not be used to promote offers or other content.
Visit the Button component page to learn more about how to use buttons.
Do not apply the external link icon to Call to action links.
Visit the Call to action component page to learn more about how to use calls to action.
The Default call to action link arrow and the external link icon should not appear by themselves, they should always be connected to at least one word on the same line.
Visit the Spacing page to see spacing values between link variants and other elements.
Related elements or patterns
To give feedback about anything on this page, contact us.