Link

Overview

Links are navigational elements that allow a user to move between content, pages, and websites.

Sample pattern

Demo

View a live version of the Call to action link and see how it can be customized.

Customize component via Elements

Style

Variants

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.

Visual elements

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.

Helpful tip

Visit the Call to action component page to see all available styles.

Text size

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.

Helpful tip

Visit the Typography page to see available text sizes.

Theme

Light theme

Helpful tip

Visit the Call to action component page to see light theme examples.

Dark theme

Helpful tip

Visit the Call to action component page to see dark theme examples.

Usage

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.

Content

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.

Warning

Link content needs to be written clearly in order to be understood, therefore write no more than four or five words per link.

Character count

There is no maximum character count for a link. The link text should be long enough to be descriptive and no longer.

Images

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.

Buttons

Do not apply a link to an action that needs to be triggered instead, like submitting a form or changing a state.

Learn more

Visit the Button or Form component pages to learn more about how to use buttons and forms.

Helpful tip

In a form, selecting a button will trigger an action whereas selecting a link will direct a user to another page.

Behavior

Internal pages

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.

External pages

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.

Helpful tip

Only Inline links can display an external link icon.

Warning

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.

Interaction states

Helpful tip

Visit the Call to action component page to see available interaction states.

Link

Hover

Focus

Active

Visited

Helpful tip

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.

Tab order

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.

Accessibility

Key	Action
Tab	Moves the focus to the next link.
Shift + Tab	Moves the focus to the previous link.
Enter	Selects the link with focus.

Responsive design

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.

Desktop

Tablet

Mobile

Best practices

Too many links

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.

Different link variants

Do not use different link variants to direct a user to the same page.

Ambiguity

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.

Long links

Do not apply links to long strings of text.

Buttons

Buttons have different use cases and should not be used to promote offers or other content.

Helpful Tip

Visit the Button component page to learn more about how to use buttons.

External link icon

Do not apply the external link icon to Call to action links.

Helpful tip

Visit the Call to action component page to learn more about how to use calls to action.

Widows

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.

Spacing

Helpful tip

Visit the Spacing page to see spacing values between link variants and other elements.

Other libraries

To learn more about our other libraries, visit the getting started page.