Links
We've split our links into 2 categories:
- inline text links - hyperlinked words in body text
- text buttons - serves as a button
We've set a lot of default class settings based on the font size, font colour and background colour. We also provide a full set of eligible customisation classes that allow user to override the default style. All the style combinations that's included in this page pass WA check.
Overview
Default style
Inline links - applicable to <p>
Refer to the list below see pre-defined hyperlinked text colours for different background colours.
On no/white background: bg-white/band-white-wrap
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
On tint background: bg-tint/band-tint-wrap
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
On black background: bg-black/band-black-wrap
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Default style
Text buttons - applicable to <h1> to <h6>
Refer to the list below abd see pre-defined button text colours for different background colours. By default, the text button is followed by a '»', with an underline effect while on hover.
On no/white background: bg-white/band-white-wrap
On tint background: bg-tint/band-tint-wrap
On black background: bg-black/band-black-wrap
Read more button
The read more button can be used on higher-level webpages, where to display an overview of its child pages. It should always link to a more detailed and descriptive page. Read more button is also a text button, which is followed by a '»'. If you'd like to have your read more button the same size as the body text, you can include .readmore to the <p> tag.
<p class="readmore">
<a href="#">read more</a>
</p>
Links to non-webpages
Links to non-webpages should indicate the file type and size in brackets as part of the link text, to notify user what they are about to download. For example:
Anchors
Anchors can be used to link to a section of a page. To do this, add an id attribute to an element such as a heading or an image. When creating an anchor we recommend the id to be a single word, and make it lowercase for easy access. For example, we are adding an anchor to the 'Overview' header. To do this, add id="overview" into the corresponding <h2> tag, and add<a href="#overview"> to the link.
Click here to this the effect.
New window and external link indicators
We have classes .link-new-win and .link-ext which have a small icon after the link and give visitors a visual cue about what will happen when they click the link.
The .link-new-win class warns visitors that a new window will open. For example, this link will opens in a new window.
The link-ext class can be used to indicate external (external to ANU) links. For example, this link goes into an external site.
Customisation
Underline
By default, our link styles don't contain an underline, underline is only visible under the hover state. But if you would like to override the default style, we've created the following classes for you to append/remove the underline.
| Class name | Code structure | Description |
|---|---|---|
.underline | <a class="underline"> | Add an underline to the link |
.nounderline | <a class="nounderline"> | Remove the underline from the link |
Customisations (Override styles)
Text buttons - applicable to <h1> to <h6>
Only use combinations listed below. Other combinations don't pass WA or don't have a strong visual cue to indicate links.
On no/white background
Unilink blue (e.g. read more, etc.) with .text-link class
Unilink gold (e.g. read more, etc.) with .text-linkgold class
On tint background
Unilink blue (e.g. read more, etc.) with .text-link class
Unilink gold (e.g. read more, etc.) with .text-linkgold class
On black background
ANU gold with .text-gold class
Case 1: Standalone
Within body text and no background colour specified, links appear in University blue. When hovering over a link, it will be bronze and with underline effect.
Case 2: With backgrounds
The link colour will also automatically adjust when background colours are used in order to meet accessibility requirements. See following examples.
2-1: Tint background
A paragraph defined with <p class="bg-tint"> that also has a link within it
A paragraph defined with <p class="band-tint-wrap"> that also has a link within it
2-2: White background
A paragraph defined with <p class="bg-black"> that also has a link within it
A paragraph defined with <p class="band-white-wrap"> that also has a link within it
2-3: Black background
A paragraph defined with <p class="bg-black"> that also has a link within it
A paragraph defined with <p class="band-black-wrap"> that also has a link within it
Case 3: With Typographies
You may have links under different headings. These are how links look like.<H1> or <p class="h1"> heading with a link within it
<H2> or <p class="h2"> heading with a link within it
<H3> or <p class="h3"> heading with a link within it
<H4> or <p class="h4"> heading with a link within it
<p> with a link within it
Read more
The 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:
<p class="readmore">
» <a href="#">more news and events</a>
</p>
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 readmore class.
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:
Anchors
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
Large text
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.
The 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.
Combinations for Accessibility test
To confirm no matter what combinations you come up, they can all pass accessibility, for you convenience, we put the conclusive list here. TBDWithin 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.
Removing underline
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.
Dark backgrounds
If you are creating a link for presentation on a dark background, use the class text-black to make both the text and any links black. For example:
A paragraph defined with <p class="bg-grey text-white"> that also has a link within it
Read more
The 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:
<p class="readmore">
» <a href="#">more news and events</a>
</p>
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 readmore class.
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:
Anchors
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
Large text
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.
The 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.