Body Hyperlinks

The blue underline formatting of conventional hyperlinks is a vestigial trait from the days when UI designers had very little scope for design creativity. In the very first browser prototypes, such as Berners-Lee’s original WWW Browser Prototype, the display was limited to 16 colours and blue was the next darkest to black. Some monitor displays only catered for black and white, which led to the addition of the underline.

The familiarity of blue underlined hyperlinks goes a long way to explaining its longevity as design element, despite being a relic from a simpler time. Nielsen, whose views on link visualization have evolved over the years, notes that “consistency is the key to teaching users what link colours mean”. Blue has historically provided that consistency, cementing the psychological association of blue with clickability.

^**NO LINKS IN HEADINGS^**

Link Buttons

A link button combo is a standard website design pattern. Utilizing a paired link button combo encourages the user to further explore the topic presented in that section, while still providing the user with the option to proceed to the Request More Information page and convert.

When the link button combo corresponds to a <h1> or a <h2> the button includes: .btn .btn-link .btn-lg classes.

When the link button combo corresponds to a <h3> or lower, the button includes: .btn .btn-link classes (defaulting to the body size of 16px).

CTA Button Link Group - Left

Theme Buttons

Predefined button classes, utlizing baked-in Bootstrap functionality. The buttons are mapped to our custom theme colors.

Button Groups

We currently don't have any use cases for button groups. Any mapped theme colors can be applied.

Contextual Buttons

We currently don't have any use cases for these contextual buttons.

Success Danger Warning Info Light Medium Dark

Button Outlines

We currently don't have any use cases for button groups. Any mapped theme colors can be applied.

Primary Secondary Default Success Danger Warning Info Light Dark