Links

There are various types of text based links used in different contexts and locations.

Text links

Links take users to another place, and usually appear within or directly following a sentence. They are navigational whereas buttons complete actions.

Text links have default, hover, and visited states differentiated by color.

External links are identified and appended with an icon indicating they leave the site.

Specs

• Default color: Primary 100

• Hover color: Dark Accent

• Visited color: Visited

Text scales up/down in the standard formula outlined in the Typography section.

Inspect type styles in the Brand Styles in Figma

File links

File links are text links that open up or download files, rather than linking to a standard web page. File links have a tag that informs users of the file type.

It is up to content editors to include the file size in the text link to display how much data accessing this file will use. This is particularly useful for mobile and limited data connections. File sizes should be written in brackets and all caps like “[#KB]”.

File links should mimic the sizing of the text around them. It is important that the whole thing is a link and that the file type is included in the a tag for accessibility.

Specs

• Use text link formatting and colors

• Tags are one step down from link size

Example - If tag font size is Body Copy Small, tag font size is Body Copy Smallest

• Tag padding: 4px 2px

Text scales up/down in the standard formula outlined in the Typography section.

Inspect type styles in the Brand Styles in Figma

Child page links

Child links are a special link type available in the WYSIWYG to call out child pages of the current page. They are meant to stand in a list, and not within paragraphs. They have an icon that comes before the text.

Anywhere where they are in a basic page should display as regular font weight. In more navigational settings like landing pages, they will be used in bold.

On basic pages in WYSIWYG content, these links have an indent of 10px, matching the indent style of standard OL and UL components.

External links lists are available in certain locations and styled with a different icon.

Specs

• Use text link formatting and colors

• Available in bold or regular font weights

• Font size: Base3 (mobile), Base5 (desktop)

• Line height: Base5 (mobile), Base7 (desktop)

• Margin left on Basic page type: 10px

• Icon size: 16px x 16px

• Icon colors: Light Accent, Primary 100

Inspect type styles in the brand styles in Figma

Change log

01/05/21 - Added External Links images and sections to 'text links' and 'child page links'.