Links

Enlaces

Actualizado el 14/03/2024

Enlace básico

Los enlaces son elementos de navegación básicos.

En la mayoría de la ocasiones, encontraremos un enlace dentro de un párrafo para enlazar una página relacionada con el contenido.

<> Código

× Ocultar Código

HTML
JS

<p><a href="#">Esto es un enlace</a></p>

Variantes

Enlaces en listas

Conjunto de enlaces dentro de una lista:

<> Código

× Ocultar Código

HTML
JS

<ul> <li><a href="#">Esto es un enlace</a></li> <li><a href="#">Esto es otro enlace diferente</a></li> <li><a href="#">Esto es un enlace adicional</a></li> </ul>

Enlaces externo y con archivos

Conjunto de enlaces externos o a documentos:

<> Código

× Ocultar Código

HTML
JS

<ul> <li><a href="#">Esto es un enlace normal</a></li> <li><a href="/sites/default/files/test.pdf">Esto es un enlace a un archivo</a></li> <li><a href="https://ateigh.com/" rel="noopener" target="_blank">Esto es un enlace a una página externa</a></li> </ul>

Uso del componente

Los enlaces se deben usar exclusivamente por razones de navegación.

Buenas prácticas:

El texto del enlace debe hacer relación directa a lo que va a encontrar el usuario en la página de destino.
Evite textos simples como "enlace" o "pulse aquí". Es importante que el enlace tenga significado descriptivo.
Es recomendable que el enlace sea lo más corto y conciso posible. Intente no exceder de las tres palabras.
Si en su sitio web hay varios enlaces hacia el mismo sitio, intente repetir el mismo texto en todos ellos.

Diseño

En esta sección se pueden ver los aspectos que presenta el componente para las diferentes pseudoclases relativas a la interacción con el mismo. Estos estilos siguen los mismos patrones de interacción que el resto de los componentes del Design System, por lo que su modificación puede afectar a la consistencia del sistema y a la experiencia de los usuarios.

Estado del componente

Estable