USER INTERFACE ELEMENTS
Links
Overview
Primary text links are used as a call to action, frequently to navigate to another page or expose hidden content. Generally, buttons will be used for the most important actions on the page, while links are used for less important ones.
Specifications
Primary
Default
- Text Color: #007ABC
- Font: Noto Sans 16px
- Text Style: SemiBold, Titlecase
- Letter Spacing: 0px
Hover/Pressed
- Text Color: #007ABC
- Font: Noto Sans 16px
- Text Style: SemiBold, Underline, Titlecase
- Letter Spacing: 0px
On Focus - (ADA compliant) - appears on keyboard navigation only
- Text Color: #007ABC
- Font: Noto Sans 16px
- Text Style: SemiBold, Titlecase
- Letter Spacing: 0px
- Stroke: #007ABC | Corner Radius: 4px | Thickness: 3px | Padding: 4px
Secondary (In-Line)
Default
- Text Color: #007ABC
- Font: Noto Sans 16px
- Text Style: Regular, Titlecase
- Letter Spacing: 0px
Hover/Pressed
- Text Color: #007ABC
- Font: Noto Sans 16px
- Text Style: Regular, Underline, Titlecase
- Letter Spacing: 0px
On Focus - (ADA compliant) - appears on keyboard navigation only
- Text Color: #007ABC
- Font: Noto Sans 16px
- Text Style: Regular, Underline, Titlecase
- Letter Spacing: 0px
- Focus Outline: Stroke: #007ABC | Corner Radius: 4px | Thickness:1px | Padding: 4px
Primary (On Dark)
Dark background use should be limited to informative page callout or promotionals.
Default
- Text Color: #FFFFFF
- Font: Noto Sans 16px
- Text Style: SemiBold, Titlecase
- Letter Spacing: 0px
Hover/Pressed
- Text Color: #FFFFFF
- Font: Noto Sans 16px
- Text Style: SemiBold, Underline, Titlecase
- Letter Spacing: 0px
On Focus - (ADA compliant) - appears on keyboard navigation only
- Text Color: #FFFFFF
- Font: Noto Sans 16px
- Text Style: SemiBold, Titlecase
- Letter Spacing: 0px
- Stroke: #FFFFFF | Corner Radius: 2px | Thickness: 2px
Secondary (In Line On Dark)
Dark background use should be limited to informative page callout or promotionals.
Default
- Text Color: #FFFFFF
- Font: Noto Sans 16px
- Text Style: SemiBold, Titlecase
- Letter Spacing: 0px
Hover/Pressed
- Text Color: #FFFFFF
- Font: Noto Sans 16px
- Text Style: SemiBold, Underline, Titlecase
- Letter Spacing: 0px
On Focus - (ADA compliant) - appears on keyboard navigation only
- Text Color: #FFFFFF
- Font: Noto Sans 16px
- Text Style: SemiBold, Titlecase, Underline
- Letter Spacing: 0px
- Stroke: #FFFFFF | Corner Radius: 2px | Thickness:2px | Padding: 4px
Links with Icons
Link appears to the left OR right of the icon when using typographic icons such as “>” or “+” (which use the same color as the link text).
Link appears to the right of utility icons (SVGs that have an on-load color of #333333 and hover (desktop only) state of #007ABC).
Trailing Icons
Default
- Text Color: #007ABC
- Icon Color: #007ABC
- Font: Noto Sans 16px
- Text Style: SemiBold, Titlecase
- Letter Spacing: 0px
Hover/Pressed
- Text Color: #007ABC
- Icon Color: #007ABC
- Font: Noto Sans 16px
- Text Style: SemiBold, Underline, Titlecase
- Letter Spacing: 0px
On Focus - (ADA compliant) - appears on keyboard navigation only
- Text Color: #007ABC
- Font: Noto Sans 16px
- Text Style: SemiBold, Titlecase
- Letter Spacing: 0px
- Stroke: #007ABC | Corner Radius: 4px | Thickness:3px | Padding: 4px
Trailing Icons (On Dark)
Default
- Text Color: #FFFFFF
- Icon Color: #FFFFFF
- Font: Noto Sans 16px
- Text Style: SemiBold, Titlecase
- Letter Spacing: 0px
Hover/Pressed
- Text Color: #FFFFFF
- Icon Color: #FFFFFF
- Font: NotoSans 16px
- Text Style: SemiBold, Underline, Titlecase
- Letter Spacing: 0px
On Focus - (ADA compliant) - appears on keyboard navigation only
- Text Color: #FFFFFF
- Icon Color: #FFFFFF
- Font: Noto Sans 16px
- Text Style: SemiBold, Titlecase, Underline
- Letter Spacing: 0px
- Stroke: #FFFFFF | Corner Radius: 2px | Thickness: 2px | Padding: 4px
Leading Icons
Default
- Text Color: #007ABC
- Icon Color: #007ABC
- Font: Noto Sans 16px
- Text Style: SemiBold, Titlecase
- Letter Spacing: 0px
Hover/Pressed
- Text Color: #007ABC
- Icon Color: #007ABC
- Font: Noto Sans 16px
- Text Style: SemiBold, Underline, Titlecase
- Letter Spacing: 0px
On Focus - (ADA compliant) - appears on keyboard navigation only
- Text Color: #007ABC
- Font: Noto Sans 16px
- Text Style: SemiBold, Titlecase
- Letter Spacing: 0px
- Stroke: #007ABC | Corner Radius: 4px | Thickness:3px | Padding: 4px
Leading Icons (On Dark)
Default
- Text Color: #FFFFFF
- Icon Color: #FFFFFF
- Font: Noto Sans 16px
- Text Style: SemiBold, Titlecase
- Letter Spacing: 0px
Hover/Pressed
- Text Color: #FFFFFF
- Icon Color: #FFFFFF
- Font: NotoSans 16px
- Text Style: SemiBold, Underline, Titlecase
- Letter Spacing: 0px
On Focus - (ADA compliant) - appears on keyboard navigation only
- Text Color: #FFFFFF
- Icon Color: #FFFFFF
- Font: Noto Sans 16px
- Text Style: SemiBold, Titlecase, Underline
- Letter Spacing: 0px
- Stroke: #FFFFFF | Corner Radius: 2px | Thickness: 2px | Padding: 4px
Usage Guidelines
Icon placement
Typographic icons (icons that can be made from text and don’t necessarily require separate SVGs) can appear to either the right or the left of a text link, depending on what makes the most sense.
Icons should not appear above or below a text link.