Links lead users to a different page or further information.
In contrast, buttons are used to signal actions. Users should be able to identify links without relying on color or styling alone.
UI Toolkit
Links
Style Requires MAX Custom Bootstrap Stylesheet
Body Text and Lists
Links that appear in body text or link lists are underlined. Links are underlined with the text-decoration property.
Lorem ipsum dolor sit amet, default link style. Vestibulum orci ante, sagittis quis dolor a, fringilla dapibus nunc. hover link style venenatis suscipit. Nulla in purus nisi. Curabitur vel odio et est auctor tincidunt. focused link style, et ultricies erat pellentesque nec. Suspendisse quis active link style faucibus nec eu justo. Nulla ut massa eget dolor vehicula bibendum. We’ve all been to the visited link style.
States Requires MAX Custom Bootstrap Stylesheet
Default
- Base Blue text
Hover
- Dark Blue text
Focus
- Dark Blue text
- Outlined
Active
- Dark Blue text
- Double Underlined
Visited
- Darker Blue text
<button class="btn btn-primary" disabled>Disabled</button>Variations Requires MAX Custom Bootstrap Stylesheet
Links in Navigation
- No Underline
- No Visited Link Style
Links with Icons
Use icons when a link needs extra emphasis. Use icons consistently, or don’t use them at all. Each icon should be used exclusively for one action.
Icons appear to the left of the link text. The color and font-size of icons should be the same as the adjacent text, including state changes. Icons are never underlined.
Examples
Email Links
Document Links
<a href="#"><span class="fa fa-fw fa-envelope fa-left"></span>Email Link</a>
<a href="#"><span class="fa fa-fw fa-file-o fa-left"></span>Generic Document</a>
<a href="#"><span class="fa fa-fw fa-file-text-o fa-left"></span>Text Document</a>
<a href="#"><span class="fa fa-fw fa-file-archive-o fa-left"></span>Archive Document</a>
<a href="#"><span class="fa fa-fw fa-file-code-o fa-left"></span>Code Document</a>
<a href="#"><span class="fa fa-fw fa-file-pdf-o fa-left"></span>PDF Document</a>
<a href="#"><span class="fa fa-fw fa-file-excel-o fa-left"></span>Excel Document</a>
<a href="#"><span class="fa fa-fw fa-file-word-o fa-left"></span>Word Document</a>
<a href="#"><span class="fa fa-fw fa-file-powerpoint-o fa-left"></span>PowerPoint Document</a>