Interactions

Types of links

Links are interactive elements that connect users to another page or page section. Outside of navigation elements, most links will appear as one of the following types:

• Inline links - appear within a sentence or paragraph of text
• Links in a list - may be accompanied by an icon
• Calls to action - styled links that call attention to important actions

Inline links

Interaction states

To improve link affordance in alignment with our brand standards, the styles in this section should apply to all inline links, visited and unvisited, in both light and dark schemes, unless noted as an exception.

Helpful tip

The Red Hat Design System Figma library contains link styles for easy formatting. However, Figma’s type settings do not currently include dashed underlines, so the style outlined below is being approximated by a dotted underline.

Default

Inline text links that may appear alongside non-link text (e.g., within body paragraphs and list items) should be styled like the following:

Property	Light scheme	Dark scheme
Color - text	--rh-color-interactive-primary-default	--rh-color-interactive-primary-default
Underline - style	text-decoration-style: dashed;	text-decoration-style: dashed;
Underline - thickness	1px	1px
Underline - color	gray-50	gray-40
Underline - offset	5px	5px

Hover

When these links receive a mouse cursor hover, link colors and underline styles are updated to the following:

Property	Light scheme	Dark scheme
Color - text	--rh-color-interactive-primary-hover	--rh-color-interactive-primary-hover
Underline - color	--rh-color-interactive-primary-hover	--rh-color-interactive-primary-hover
Underline - offset	6px	6px

Visited state

Visited links will change colors to one of our interactive visited tokens.

Underlining

The following elements are exempt from underlining requirements and should not have the aforementioned underline styles applied to them by default.

Exceptions

Example CSS

Developers can use the following CSS as a starting point for link underlining:

• In practice, you will probably want to use a more specific selector than :is(p, ul, ol, dl) a, because this example selector applies to all links in paragraphs or lists on a page.
• This example adds a max() function to the text-underline-offset property, allowing this value to grow proportionally at large font sizes.
• As of this writing, Safari has some issues with the text-decoration shorthand property, so we separated it out into its component options (-color, -line, -style, and -thickness).

Behavior

Opening links in new windows

At Red Hat, we prefer to keep the user in control of their own experience. Therefore, avoid forcing links to open in new windows or tabs, except under very specific circumstances.

External pages

Indicate when links will direct users to another domain. While text indicators are preferred, you may also use external link icons, provided that the icon has a text label (e.g., alt text) for assistive tech.

Pointing an external link to another domain is not a reason for opening it in a new window or tab.

Helpful tip

Calls to action have different guidance regarding what icons can be used.

Accessibility

Keyboard interactions

A user should have the ability to navigate to and interact with links using their keyboard.

Key	Result
Tab	Moves focus to the next interactive element (for example, from link to link)
Shift + Tab	Moves focus to the previous interactive element (for example, from a call to action to an inline link like in the example below)
Enter	Selects a link

Tab order

When the Tab key is pressed repeatedly, the focus highlights links in order, from left to right and top to bottom.

Best practices

Link text clarity

Writing accessible link text

Long links

Buttons