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.

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

Internal pages

If a user selects a link within redhat.com or other Red Hat web property, a new tab or window should typically not be opened.

External pages

Use an external link icon if a link will direct users to another domain. This does not necessarily mean that the link will or should open in a new tab or window. However, if navigating to a new page in the same tab is very disruptive to the experience or workflow, then consider having the page open in a new tab or window.

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

Long links

Buttons