DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Cabeceras

Componentes principales

Se trata de un elemento siempre disponible en la parte superior de la pantalla. Proporciona un acceso a funciones de todo el sistema y elementos de navegación local.

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.

Descripción visual

Componente skip-link con un rectángulo delgado de borde gris claro sobre fondo blanco. Contiene texto negro pequeño alineado a la izquierda. El elemento ocupa todo el ancho disponible con padding mínimo.

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

Descripción visual

Componente skip-link con una barra amarilla brillante que ocupa todo el ancho. Contiene texto negro subrayado centrado horizontalmente. El fondo amarillo sólido cubre completamente el área del componente con padding vertical visible.

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"
}) }}