desy-html

Skip-link

Mostrar parámetros

Parámetros del componente

              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.

Por defecto

Para ver el componente Skip link, dale al tabulador en este ejemplo, o haz click dentro del ejemplo y presiona el tabulador.

Saltar al contenido principal
Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro

{% from "components/skip-link/_macro.skip-link.njk" import componentSkipLink %}

{{ componentSkipLink({
  "text": "Saltar al contenido principal",
  "href": "#content"
}) }}

Con estado focus

Simula activar la pseudoclase de CSS :focus

Saltar al contenido principal
Mostrar códigodel ejemplo: Con estado focus

Contenido

Nunjucks macro

{% from "components/skip-link/_macro.skip-link.njk" import componentSkipLink %}

{{ componentSkipLink({
  "classes": "ds-focus",
  "text": "Saltar al contenido principal",
  "href": "#content"
}) }}