Skip to main content Red Hat Design System logo Contribute on Github

Skip link

Overview Style Guidelines Code Demos Accessibility

Style

A skip link is designed to be easily seen once a user navigates to it.

Anatomy

Anatomy image showing calls to action with various annotation numbers
  1. Text label
  2. Container
  3. Border

Theme

A skip link appears the same in both light and dark themes.

Image of a skip link in a light theme section Image of a skip link in a dark theme section

Configuration

A skip link’s bottom corners have a border radius of 4px, which matches the border radius of the call to action element. The top corners have a border radius of 0px to keep the top edge flush with the top of the page.

Placement

A skip link should be centered and aligned with the top edge at all viewport sizes. It also overlaps items at the top of the page.

A skip link element at the top overlays the navigation header of redhat.com

Space

A skip link element at the top overlays the navigation header of redhat.com
Example Token Description
16 --rh-space-lg 16px spacer
32 --rh-space-2xl 32px spacer

Interaction states

Interaction states are visual representations used to communicate the status of an element or pattern.

Focus

Because a skip link is in focus once it appears on the screen, the default and focus states are the same. The blue, 2px-wide border mimics the focus ring for other elements.

A skip link with blue text and a blue border around three sides

Hover

A skip link's text is underlined on hover

Active

Helpful tip

The Active state has the same styles as the Hover state.

A skip link's text is underlined when it's active
© 2021-2024 Red Hat, Inc. Deploys by Netlify