Link

Los links nos indican caminos y ayudan a las personas a moverse de un lugar a otro dentro del producto digital.

Su función principal es guiar al usuario hacia información, páginas o acciones relacionadas, manteniendo siempre la consistencia visual y de comportamiento.

Un buen link debe ser claro, reconocible y accesible, para que el usuario entienda fácilmente que puede hacer clic en él y adónde lo llevará.

El componente Link tiene dos variantes de diseño: Default e Inverse.

El estado Default se utiliza sobre fondos claros, mientras que el Inverse está pensado para aplicarse en fondos oscuros, como navy o fotografías.

El componente Link cuenta con distintas opciones de configuración que se aplican a cada una de sus variantes. Gracias a esta flexibilidad, el link se convierte en un componente versátil, capaz de adaptarse a diferentes contextos dentro de los productos digitales de Repsol.

En definitiva, estas configuraciones aseguran que el componente se integre de manera coherente con la identidad visual, al mismo tiempo que responde a las necesidades específicas de navegación y usabilidad de cada producto digital.

En Energy definimos de manera precisa cómo debe actuar el link en distintos escenarios —ya sea dentro de un texto, en un menú, sobre un fondo claro u oscuro, con o sin icono— para que la experiencia sea siempre coherente y predecible. Esta consistencia asegura que, sin importar en qué producto se encuentre, la persona usuaria reconozca el link al instante y confíe en que su comportamiento será el mismo en todo el ecosistema digital de Repsol.

Constraints

Anchura: El componente no tiene un ancho máximo definido.

Overflow: Cuando un link tiene un texto demasiado largo, este puede ocupar más de una línea y se alineará siempre a la izquierda. Para evitarlo, lo mejor es usar textos cortos y claros. Si no es posible simplificar el mensaje, se recomienda utilizar un inline link, que funciona mejor en frases largas dentro de un párrafo.

Grouping

No se permite mezclar links con botones en un mismo grupo, ya que puede generar confusión visual y de uso. En su lugar, cuando necesites un estilo más ligero o secundario, se debe utilizar la variante Ghost del botón, que cumple esa función sin perder consistencia en la interfaz.

Grouping de links: Se recomienda no agrupar varios links con arrow en línea, para evitar que estos señalen a otro link.

Las microinteracciones en un link son esos pequeños gestos, como un cambio de color, un subrayado o una animación sutil al pasar el ratón, que hacen que el usuario lo reconozca al instante como algo clicable.

Aunque puedan parecer detalles menores, son fundamentales: ayudan a que cualquier persona, sin esfuerzo, entienda dónde puede hacer clic, mejoran la accesibilidad y generan confianza en la navegación.

Microinteracción: Hover

En el estado Hover, el link muestra una microinteracción pensada para hacerlo más reconocible y atractivo. El color del texto cambia a Content High Inverse y aparece un subrayado con un trazo del mismo color.

Ese trazo no aparece de golpe: se dibuja de izquierda a derecha de forma progresiva, hasta subrayar el 100% del texto. Los iconos, en caso de estar presentes, no se subrayan, manteniendo así la limpieza visual.