Hyperlinks, Buttons & Navigation
Hyperlinks
Example Hyperlink
Hyperlinks are used to link to another page or site, and live in the body of the site. They're a quick, direct way to link to something from within the context of the body's content.
As a rule of thumb, if it's a hyperlink, it should be differentiated somehow from the rest of the body text, like so.
Usage:
-Body text
-Lists (such as Agency and Enterprise Footers)
Link color will darken on hover.
External Links
Example External Link
For users, the expectation is that links within a website will take you to another section of that same website. However, there are times when you'll need to link to something external. In this case, it should be indicated with an external link icon.
Usage:
-Any link or button that links to a different website. Exceptions may be made to include "whitelisted" sites within the agency or enterprise.
Buttons & Tiles
Example Button
Example Tiles Page
Buttons and Site Navigation should be visually distinct from the rest of the site's content. For this reason, Buttons and Site Navigation do not need to be underlined, provided that they are visually distinct and consistent.
Buttons and navigation can contain related icons.
Buttons that link to something external should include the external link icon.
Buttons and Tiles should invert the text color with the background color on hover.
Animation :
-0.3s
-ease-in-out
-color, background-color, border-color
Navigation
See Top Nav on this page for example.
Navigation is reserved for moving a user from one point in the site to another. It should remain consistent across every page of a given site, and should adapt to the screen size to ensure navigation is equally possible for every user.
Navigation should be visually distinct and visually constant. Meaning, if the navigation is at the top of the homepage, it should be there on a subpage.
As with buttons, provided visual distinction and consistency are observed, there is no need to underline the text.
It is acceptable to use buttons within the Top Nav, like the "Escape" button. It should fill the entire height and width of a Nav item.
Navigation items can also have associated icons, though it is not required.
In general, you should not put uany external links in the navigation. If you can't avoid it, they must have an external link icon.