Thompson Rivers University
Thompson Rivers University

Links

Best Practices

Open in: When creating links - either internal or external - please choose 'Open in: Same Window (Replace the active screen with the linked screen)'. This is to maintain consistency and usability for users, allowing them to use the back button in all browsers, including mobile.

External links: Please do not select 'Insert External Link Icon' when creating external links. This is no longer necessary and is not recommended.

Font weight: Links should never be bolded, underlined or italicized to indicate emphasis.

File Type Icons

These icons will be automatically added to file downloads. The CSS will recognize the following filetypes and append a coloured download icon.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pulvinar sapien elit, mattis congue lectus. Sed erat felis, blandit quis posuere quis, facilisis et sem. This is a link to a word document. Vivamus quis est sem, sed tempor risus. Curabitur felis quam, mattis non egestas non, luctus et elit. In quis ornare sapien. This is a link to a PDF. Praesent blandit auctor dui, et porttitor dui euismod nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Linking Images

If you are linking an image to a document, the icon will also automatically be applied. To stop this, add nobg class to the anchor tag.

Without nobg Class
With nobg Class

In-page Anchors

In-page anchors are rarely encouraged. If necessary, insert the links to the in-page anchors at the top of the page in an inline list:

Click the above links to jump to the associated anchors.


<ul class="inline-list">
<li><a href="#link1">Link 1</a></li>
<li><a href="#link2">Link 2</a></li>
<li><a href="#link3">Link 3</a></li>
</ul>

The in-page anchor would then be inserted with an id where you want the link to jump to. In addition, you should add class="pageAnchor" so that the page adjusts for the sticky navigation.

This is the anchor for Link 1

This is the anchor for Link 2

This is the anchor for Link 3


<a class="pageAnchor" id="link1"></a><p>This is the anchor for Link 1</p>
<a class="pageAnchor" id="link2"></a><p>This is the anchor for Link 2</p>
<a class="pageAnchor" id="link3"></a><p>This is the anchor for Link 3</p>

Alternatively, you can use a button group:


<ul class="button-group">
<li><a href="#" class="button nomargin tealbg radleft">Link 1</a></li>
<li><a href="#" class="button nomargin tealbg">Link 2</a></li>
<li><a href="#" class="button nomargin tealbg radright">Link 3</a></li>
</ul>

Phone Numbers

Use the following syntax to make phone numbers clickable links. One desktop computers, these links may open programs such as Skype. On mobile devices, the links will allow users to call the number.

555-555-1212


<p><a href="tel:+15555551212">555-555-1212</a></p>