Links

Links are styled globally on the a element — no class is needed. They use the trust primary colour, are underlined, and show a focus ring on keyboard focus.

          
<a href="/appointments">View your appointments</a>
          
        

Live example:

States

• Default / visited / hover: primary colour; hover and visited use a darker shade.
• Focus: a 2px primary outline appears on keyboard focus (:focus-visible), so mouse clicks do not show a ring but keyboard users get a clear indicator.

Back link

Use back-link for a “back” navigation link. It uses the primary colour with no underline, and pairs well with a leading chevron / arrow icon.

          
<a href="/forms" class="back-link">Back to forms</a>
          
        

Live example:

Accessibility

Link text must make sense out of context — prefer “View your appointments” over “click here”. Never rely on colour alone to signal a link; the default underline carries that meaning, so keep it for body links.

Classes

a (no class)

Standard inline link styling, applied globally.

back-link

A back-navigation link: primary colour, no underline.

block-link

Sets cursor: pointer only. Minimal and rarely needed — to make a whole card clickable, prefer stretched-link on the Utilities page.