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.

• Word Documents (.doc & .docx)
• Excel Spreadsheets (.xls & .xlsx)
• Powerpoint Files (.ppt & .pptx)
• PDF Documents (.pdf)

PDF, Word, Excel and PowerPoint files — for "XXXXX" use ID of asset in ACM.

<a href="/AssetFactory.aspx?did=xxxxx">Link to asset</a>

Linking Images

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

<a class="nobg" href="#"></a>

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:

• Link 1
• Link 2
• Link 3

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.

<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:

• Link 1
• Link 2
• Link 3

<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>