Overview
Overview
Direction links are accompanied by arrows to help users move quickly to other parts of the page or through a process.
Use direction links to indicate a physical direction, such as:
- linking 'up' or 'down' within the page
- going 'back' to a parent page
- showing the 'next' or 'previous' pages.
Example
<a href="#" class="qld__direction-link qld__direction-link--up">Up</a>
<a href="#" class="qld__direction-link qld__direction-link--down">Down</a>
<a href="#" class="qld__direction-link qld__direction-link--left">Left</a>
<a href="#" class="qld__direction-link qld__direction-link--right">Right</a>
Usage guidelines
Directional cues such as these components give a visual hint on specific interaction or content to let the user see it faster and easier.
When to use
- Link within a page - for example, Back to top
- Use to guide users back to a parent page
- Use to show pages that are part of sequential task, ie next or previous step
When not to use
- Use a link in place of a button
- Use in place of a CTA link