Skip link

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

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

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.

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.

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

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.