Links

Last updated: 11/10/2022

Overview

Body text links are link-100 (#3366CC) and underlined to meet accessibility requirements.

This is a body text link

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.

Focus

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

CSS code

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