Web Pattern Library

Link Icons

By default, all links display red and underlined like this.

Certain links will display with icons indicating where or what the link goes to.

Examples

Link Type	`href` match	Example
PDF	`[href$='.pdf']`, `[href$='.PDF']`	PDF
Word Document	`[href$='.doc']`, `[href$='.docx']`	Word Document
Excel Spreadsheet	`[href$='.xls']`, `[href$='.xlsx']`	Excel Spreadsheet
PowerPoint Presentation	`[href$='.ppt']`, `[href$='.pptx']`	PowerPoint Presentation
ZIP Archive	`[href$='.zip']`	ZIP Archive
Phone Link	`[href^='tel:']`	(435) 586-7700
Email Link	`[href^='mailto:']`	example@example.com
Flickr Link	`[href^='http://www.flickr.com']`, `[href^='http://flickr.com']`, `[href^='https://www.flickr.com']`, `[href^='https://flickr.com']`	Flickr

In cases where a link icon will not work, such as for non-plaintext links, the no-icon class can be applied to the a element.

.no-icon Phone Link: (435) 586-7700
Example: <a class="no-icon" href="tel:+1(435) 586-7700">(435) 586-7700</a>

Phone link icons in the footer will display with a white icon, rather than black.