Within body text, links appear in University blue with an underline. When hovering over a link, it will be bronze. In other situations (such as a read more link) the text will not be underlined until the link is hovered over.
The link colour will also automatically adjust when background colours are used in order to meet accessibility requirements.
While an underlined link is preferred to maximum usability there are some situations where the underlining is overwhelming or unneeded. For example, you might have a table of links where it is obvious that each item is a link and the underlines are overwhelming with the table borders.
In such cases, you can turn link underlining off by using the class
nounderline on any element. The link will still appear underlined on hover.
This link uses <p class="nounderline">.
If you are creating a link for presentation on a dark background, use the class text-white to make both the text and any links white. For example:
A paragraph defined with
<p class="bg-grey text-white"> that also has a link within it
readmore class can be used when linking to more detailed pages or listings from a summary view or article (a block of content with a heading and either a block of text or a link). Text within read more links can be less descriptive than usual links because the link makes sense within this context.
Read more links are a smaller font and should have a right angle quote (») in front using the character code
». No capitalisation is preferred. For example:
» more news and events
» <a href="#">more news and events</a>
In some cases the
readmore class could cause the text to wrap below content, such as boxes, creating unwanted whitespace on the page. To fix this issue, apply the
noclear class as well as the
Links to non-webpages
Links to non-webpages should indicate the file size and type in brackets as part of the link text, to warn users that they are about to download a file. For example:
File size and type instructions (PDF, 186KB)
Anchors can be used to link to a section of a page. To do this add an
id attribute to an element such as an link or heading. When creating an anchor we recommend the
id is one word, and lower case for ease of use. For example,
id="styleexample". To link to the anchor add # followed by your chosen anchor id to the page URL. For example, http://webpublishing.anu.edu.au/web-style-guide/links.php#anchors
As described on the text page, the class
large is available for increasing the font size without making an item a heading. When linking within a large paragraph, the link will have an underline unless the paragraph is also wrapped in a
<strong> tag, in which case the underline only appears on hover.
New window and external link indicators
Links should not open in new windows and tabs as this can be disorienting for people, especially those who have difficulty perceiving visual content, and is not expected behaviour. Additionally, visitors prefer to control this behaviour. In cases where this is unavoidable, it is recommended that there is advance warning.
Classes are available which add a small icon after a link to give visitors a visual cue about what will happen when they select the link. This should be used with the
title attribute to provide a text-based indication as well. These classes can also be used on image links.
link-new-win class warns visitors that a new window will open. For example:
This link opens in a new window.
Similarly, the class
link-ext can be used to indicate that a link is external to ANU. For example:
This link goes to a site external to ANU.