Link

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

Link component examples

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

Customize component via PatternFly Elements

Link component blueprint

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.

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

Link component visual elements

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.

See more
Visit the Typography page to see available text sizes.

Light theme

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

Link component, light theme

Dark theme

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

Link component, light theme

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.

Link component usage

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.

Link component usage, content

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.

Link component usage, buttons

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.

Link component, internal vs. external pages

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

Link

Link component interaction state, link (light theme)
Link component interaction state, link (dark theme)

Hover

Link component interaction state, hover (light theme)
Link component interaction state, hover (dark theme)

Focus

Link component interaction state, focus (light theme)
Link component interaction state, focus (dark theme)

Active

Link component interaction state, active (light theme)
Link component interaction state, active (dark theme)

Visited

Helpful tip
Only an Inline link with a color applied includes a Visited style.

Link component interaction state, visited (light theme)
Link component interaction state, visited (dark theme)

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.

Link component tab order

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.

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

Link component responsive design, desktop

Tablet

Link component responsive design, tablet

Mobile

Link component responsive design, mobile

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.

Link component best practice 1

Different link variants

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

Link component best practice 2

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.

Link component best practice 3

Long links

Do not apply links to long strings of text.

Link component best practice 4

Buttons

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

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

Link component best practice 5

External link icon

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

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

Link component best practice 6

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.

Link component best practice 7

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

To give feedback about anything on this page or to request a new Component, contact us.

To learn more about how to use foundational elements, visit the Foundations section.