Global Link Styling

The default color code for links is #058ecb except for links within H1 tags. The link text carries no text-decoration and inherits the rest of the style from the context. It is underlined when hover is activated.

Types of Links

Inline Links

Links embedded within the body of the text are inline links, and they inherit text styles from the context of the link. A hover action will underline the link text. Link text should be short, descriptive, and indicative of where the link leads.

Example See your full performance report.

A standard inline link will not have a destination indicator.

“All” Links

Some modules may only present a portion of items or information that belongs to a larger group. A full set to these items is notated and accessed by an “all” link. “All” links are always placed in the top right corner of the module, aligned with the baseline of the headline.

“More” Links

Some modules may present an instance of information that contains more detail. A full display of this detail can be accessed by a “more” link. This example shows a module that presents a portion of the information and allows the user to access the full display of information.

“More” links are always placed in the bottom left corner of the module, with one line space between the above content and the link.

Download Links

Some links may lead to downloadable content that will initiate a download once clicked. These links are labeled as “download” accompanied by a download glyph like in the image below.

Download links are always placed in the bottom left corner of the module, with one line space between the above content and the link.

Link Destinations

Same Domain

Links pointing to additional content are accompanied by a right-gate glyph. This indicates that the link is directing to a page within that domain. “All” and “more” links will always point to destinations in the same domain.

Expandable Content

Some modules may present a portion of information that can be expanded to view more of that set of information within that module.Once expanded, the link is no longer visible or retractable. A link that indicates expanding content is accompanied by a down-gate glyph.

Out of Domain Links

Some links may lead to pages outside of the domain. Links with this functionality are accompanied by an icon—like in the image below—and direct the user to a new tab or window.