Skip link
Importing
Add rh-skip-link to your page with this import statement:
<script type="module">
import '@rhds/elements/rh-skip-link/rh-skip-link.js';
</script>To learn more about installing RHDS elements on your site using an import map read our getting started docs.
Lightdom CSS shim
Warning
Lightdom CSS shims are an optional, temporary solution for reducing CLS. Learn more about lightdom CSS shims .
<link rel="stylesheet" href="/path/to/rh-skip-link/rh-skip-link-lightdom-shim.css">Note
Replace /path/to/ with path to the CSS file, whether local or CDN.
Usage
<rh-skip-link href="#main-content">Skip to main content</rh-skip-link>
<script type="module">
import '@rhds/elements/rh-skip-link/rh-skip-link.js';
</script>rh-skip-link
A skip link is used to skip repetitive content on a page. It is hidden by default and can be activated by hitting the "Tab" key after loading/refreshing a page.
| Slot Name | Description |
|---|---|
|
An anchor tag targeting the main page content by id hash. Or, if the |
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
href |
href |
|
|
| Token | Copy |
|---|---|
--rh-border-radius-default
|
|
--rh-border-width-md
|
|
--rh-border-width-sm
|
|
--rh-color-border-interactive-on-light
|
|
--rh-color-interactive-primary-default-on-light
|
|
--rh-color-surface-lightest
|
|
--rh-font-family-heading
|
|
--rh-font-size-body-text-md
|
|
--rh-font-weight-heading-bold
|
|
--rh-space-2xl
|
|
--rh-space-lg
|
|
