Quick link cards
Quick link cards are for call to actions on landing page experiences that need to highlight additional navigation or cross linking opportunities, usually on full width landing page experiences. Quick link cards should have two or more related call to actions that will display in a row.
When to use
To highlight additional navigation or cross linking opportunities
When not to use
- For single standalone call to actions
- Inline or after long form content
Anatomy
- Label: use a concise but clear description of what action the card initiates and should always be written in title case
- Arrow icon: shows for an link that isn’t marked as off-site
- Off-site icon: any card that links off-site should have the off-site link icon (opens in a new window)
- Row: should display in a row with at least 2 or more cards included and are only available with bright blue 10% background color
Demos & variations
Minimum 2-up
3-up
4-up
Recommend maximum 5-up
Multiple line CTAs
Height of row will be determined by the height of the longest quick link card.
Stack in mobile and tablet
Stack only in mobile
Authoring notes
To utilize quick link cards you will have to first place the container for quick link cards component.
Behaviors
Mouse
Users can click on the entire card to trigger the call to action.
Keyboard
Users can navigate between cards by pressing Tab and Shift-Tab. Users can trigger the call to action by pressing enter.