Within body text, links appear in platinum 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.
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-uni 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
Classes are available which add a small icon after a link to give visitors a visual cue about what will happen when they click the link. These classes can also be used on image links.
Links should not open in new windows as visitors prefer to control this behaviour. In cases where this in unavoidable, you might like to use the
link-new-win class to warn 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.