Links
This page covers incidental links that are not primary navigation, i.e. are not:
- In the sidebar
- In the main nav bar
- The primary link in a navigation page
Links are unstyled by default. For simple text links, add the fun-link class.
Do use links for navigation. For navigation that feels like an action, for example ‘Save’, use a link styled as a button.
Do not use links for actions. Links are only for navigation.
Internal links
Internal links are links that lead to other pages in the Funnel app.
Never open an internal link in a new tab. This is potentially confusing to the user and a function that is already built in to the browser if the user wants it.
For internal links use target="_top" so the link opens in the main window, rather than the iframe the app is running in.
Links to external sites
Links to external sites should be decorated with the external-link icon and open
in another tab.
Links to help
Links to Funnel help pages should be prefixed with the question-circle icon and
open in another tab.
Download links
Links that download documents should be prefixed with the download icon.
Links styled as buttons
For primary actions that involve navigation, use a fun-button with the href property. This will
result in an a element actually being used, but with button styling.
