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

Code

Use the tabs to view the anchor tags source code.

Use left and right arrows to navigate between tabs.

HTML

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

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

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

      

CSS


  /*
  Anchors
  ----------------------------------- */

.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 {
  
  .anchor{
    color: #000!important;
  }

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

  .anchor:after {
    content: '';
  }

}


      

Back to all components