Links
Links occurring within paragraph text are displayed in RMIT Blue with an underline. The extra visibility the underline provides is important due the lack of contrast between RMIT Blue and the main text colour, Dark Grey. On hover, the colour changes to Blue Hover and the underline is removed.
In other situations, no underline is displayed for links. In these situations, such as in navigation, the intent that the text acts as a link is clear and the repetition of the underlines would appear aesthetically unappealing and visually "heavy". A red carat is sometimes used to help denote that a link is present. On hover, the colour generally changes to Blue Hover and the underline is displayed.
Due to contrast ratio constraints, links should only be presented on white or Underlay Grey backgrounds.
Headings
Headings should not be used as links, the exception being in navigation.
Link large
Link Large can be used to provide emphasis at the end of a paragraph. Only one Link Large should be used at a time, if multiple links are going to be presented, use List links component.
Find out more<a href="enter-link-here" class="link-large">Find out more</a>
Prev and next links
These can be used at he bottom of pages to provide page to page navigation. They can be useful if other forms of navigation are used at the top of pages (e.g. breadcrumbs) and the user scrolls through content to the bottom of a page. They avoid excessive scrolling or repeat navigation and allow the user to progress through the site easily.
<nav class="btn-nav-container" aria-label="Previous and next buttons">
<a class="btn btn-nav-prev" href="" aria-label="Previous page">Previous page</a>
<a class="btn btn-nav-next" href="" aria-label="Next page">Next page</a>
</nav>
If you only have a back button, do this:
If you only have a next button, do this:
Link list
An option to display a list of links while giving the list more prominence than a standard unordered list.
<ul class="link-list">
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
More information
Have a look at the navigation page to view more complex examples of links being used in the design system.
