Publications Office of the EU
Links - Publications Office Web Guide
DisplayCustomHeader
MyPortal
BasketSummary
Dockbar

Links

Last updated: 13/03/2024

Overview

Body text links are eu-blue-100 (#0E47CB) and underlined to meet accessibility requirements.

This is a body text link

Asset Publisher
Color Value Utility class CSS variable Use
eu-blue-100 HEX #0E47CB
RGB 14, 71, 203 		gs-u-color-eu-blue-100
gs-u-bg-color-eu-blue-100		 --gs-base-color-eu-blue-100

Attributes for this color: Accessible

For text links and main buttons.

Link states

The :hover and :active states use text-decoration: none;.

The :visted state is the same as the default link state. However, for use cases where this differentiation is required, use lavender-110 (#76017A) and maintain underlined.

This is a visited link with lavender-110
Click on the link to see the color change.

Asset Publisher
Color Value Utility class CSS variable Use
lavender-110 HEX #76017A
RGB 118, 1, 122 		gs-u-color-lavender-110
gs-u-bg-color-lavender-110		 --gs-base-color-lavender-110

Attributes for this color: Accessible

For Research accessible branded color text, Research buttons and navigations.

Also for the link visited state.

Focus

For focus, use :focus-visible with an outline attribute.

CSS code

  .gcss-op a:focus-visible {
    outline: 2px solid var(--gs-base-color-eu-blue-100)!important;
    outline-offset: 4px;
    border-radius: 0.015rem;
    -moz-outline-radius: 0.015rem;
  }