The Wayfinding card module is used to direct customers to higher level category pages such as an Event, Application, or Brand Overview page. It should not be used to link to content focus pages such as specific webinars, case studies, white papers, and events. Instead, use the Preview cards module for these purposes.
Desktop
Mobile
Layout options
The Wayfinding Card Module consists of the following elements:
- Headline (optional)
- Image (optional)
- Card Header*
- Next icon*
- Preview text (optional)
*required element
As an option, a headline can be displayed which appears as the first element in this module.
There are 2 layout options for this module: stack and carousel.
- Stack displays the cards in a grid on desktop and tablet, and in a single column on mobile.
- Carousel displays the cards in a carousel on both desktop and mobile.
Images, if used, must be displayed on all cards in the module to ensure proper alignment - see the example in the Do’s and Don’ts below.
Card headline
Character limit: 42
Preview text
Character limit: 120
For general copywriting guidelines, please refer to the Writing Rules.
Colorways
This module has six colorways. The colors shown within cards are non-editable to ensure consistency.
Use this module as a wayfinding tool for the customer, linking to sub-pages or pages that closely relate to the page currently being viewed. It is used, for example, on Application pages to direct customers to product subcategory pages, and on Brand pages as links to product listing pages.
Examples of use
DO: Images, if used, must be displayed on all cards in the module to ensure proper visual alignment across cards.
DO: Keep preview text under the limit of four lines. Use maximum advised character limit and correct text styling. Read more about typography.
DON'T: Mix cards with and without images. This will make the cards look misaligned.
DON'T: Mix cards with and without body text. Make sure all of the cards are following the same structure.