Skip to main content

Components

SkipLink

SkipLink helps people using keyboard navigation to navigate, so they can easily go to the main content on a page.

children
Description

The content to display inside the skiplink.

Type
any
href
Description

Href of an element in the DOM the skiplink should skip to. E.g #main-content

Type
string
NameTypeDefaultDescription
childrenany-

The content to display inside the skiplink.

hrefstring-

Href of an element in the DOM the skiplink should skip to. E.g #main-content

Use

HTML

Add the class name ds-skip-link to an <a> tag that points to the main content of the page.

CSS variables and data attributes

CSS Variables
NameValue
--dsc-skiplink-paddingvar(--ds-size-4) var(--ds-size-4) var(--ds-size-5) var(--ds-size-4)
--dsc-skiplink-backgroundvar(--ds-color-surface-hover)
--dsc-skiplink-colorvar(--ds-color-text-default)

No relevant data attributes found.

Edit this page on github.com (opens in a new tab)