Red Hat design system

Overview Style Guidelines Code Demos Accessibility

Usage
rh-skip-link

Usage
rh-skip-link

Installation

Learn more about how to install on our getting started docs.

Red Hat CDN

<script type="module">
  import '@rhds/elements/rh-skip-link/rh-skip-link.js';
</script>

Import Map Example

<script type="importmap">
  {
    "imports": {
      "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.0.1/elements/",
    }
  }
</script>

NPM

npm install @rhds/elements

<script type="module">
  import '@rhds/elements/rh-skip-link/rh-skip-link.js';
</script>

JSPM

<script type="module">
  import '@rhds/elements/rh-skip-link/rh-skip-link.js';
</script>

Import Map Example

<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-skip-link/rh-skip-link.js": "./elements/rh-skip-link/rh-skip-link.js"
  },
  "scopes": {
    "./": {
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit/decorators/": "https://ga.jspm.io/npm:lit@3.2.0/decorators/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    },
    "https://ga.jspm.io/": {
      "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js",
      "@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/decorators/",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.0/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.0/development/lit-html.js",
      "lit-html/is-server.js": "https://ga.jspm.io/npm:lit-html@3.2.0/development/is-server.js"
    }
  }
}
</script>

Lightdom CSS shim

This element has an optional "Lightdom CSS" shim to help reduce Cumulative Layout Shift (CLS) experience before the element has fully initialized.

<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.

Warning

Lightdom CSS shims are an optional, temporary solution for reducing CLS. Delcarative Shadow DOM is the better solution, and once it is more widely available, Lightdom CSS shims will no longer be needed and will become deprecated.

Usage

<rh-skip-link>
  <a href="#main-content">Skip to main content</a>
</rh-skip-link>

Slot Name	Description
	An anchor tag targeting the main page content by id hash. Or, if the `href` attribute is set, the text of the link.

Attribute	DOM Property	Description	Type	Default
`href`	`href`		`string \| undefined`	`unknown`

None

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`

Edit this page on GitHub

Other libraries

Feedback

Skip link