Skip-link examples

Show params

Params

params:
- name: text
  type: string
  required: true
  description: If `html` is set, this is not required. Text to use within the skip link component. If `html` is provided, the `text` argument will be ignored.
- name: html
  type: string
  required: true
  description: If `text` is set, this is not required. HTML to use within the skip link component. If `html` is provided, the `text` argument will be ignored.
- name: href
  type: string
  required: false
  description: The value of the skip link’s `href` attribute. Defaults to `#content` if you do not provide a value.
- name: classes
  type: string
  required: false
  description: Classes to add to the skip link.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the skip link.

To view the skip link component tab to this example, or click inside this example and press tab.

Saltar al contenido principal
Show code

Macro

{% from "components/skip-link/_macro.skip-link.njk" import componentSkipLink %}
{{ componentSkipLink({
  "text": "Saltar al contenido principal",
  "href": "#content"
})  }}

Markup

<!-- skip-link -->
<a href="#content" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline">Saltar al contenido principal</a>
<!-- /skip-link -->

Simulate triggering the :focus CSS pseudo-class.

Saltar al contenido principal
Show code

Macro

{% from "components/skip-link/_macro.skip-link.njk" import componentSkipLink %}
{{ componentSkipLink({
  "classes": "ds-focus",
  "text": "Saltar al contenido principal",
  "href": "#content"
})  }}

Markup

<!-- skip-link -->
<a href="#content" class="c-skip-link sr-only active:not-sr-only focus:not-sr-only focus:outline-none focus:shadow-outline-focus block p-base bg-warning-base text-center text-black underline ds-focus">Saltar al contenido principal</a>
<!-- /skip-link -->