Control Colour theme
Control Font family

Anchor tags

An anchor tag is used to link from one page or section of a page to another.

Anchor tags should:

  • have clear hover and focus states
  • be distinguishable by more than just colour
  • have desctiptive content like "We'd love for you to get in touch with us
  • clearly communicate if they open a new window
  • show the full URL if printed

Anchor tags should not:

  • use non descriptive text like "Click here to get in touch
  • perform an action, for this use a button


Use the tabs to view the anchor tags source code.

Use left and right arrows to navigate between tabs.


    <a href="#" class="anchor">Link</a>

    <a href="#" class="anchor" rel="noopener" target="_blank">External link</a>

    <a href="#" class="anchor">Incredibly long anchor text link</a>



  ----------------------------------- */

.anchor {
  color: var(--colour-medium);
  text-decoration: none;
  border-bottom: dashed 1px currentColor;

.anchor:hover {
  transition: all .3s ease-in-out;
  color: var(--colour-bright);
  border-bottom: solid 1px;

.anchor[target=_blank]:after {
  content: ' (opens new window)';

/* Print styles */
@media print {
    color: #000!important;

  .anchor:before {
    content:" (" attr(href) ") "!important;
    font-size: 0.8em;
    font-weight: normal;

  .anchor:after {
    content: '';



Back to all components