Product ribbons present individual products and offer a path to product listing pages. Product ribbons can be used on most page types (the only exceptions being PDPs, PLPs and pages where the main content is a form).
Currently three different versions of the product ribbon exists. The versions only contain small differences and can be used interchangeably depending on the needs of the page they are placed on.
The three versions are:
Desktop
Mobile
Desktop
Mobile
Desktop
Mobile
The product ribbon module consist of the following elements:
- Product tile(s)* (Retrieved from PDH/PIM)
- Headline (optional)
- Tabs (optional)
- Button (optional)
* required element
Headline
Character limit: 62
Do not exceed three lines of text on 360px screens
Body text
Character limit: 120
For general copywriting guidelines, please refer to the Writing Rules.
Colorways
This module should only ever be used with a white background to ensure maximum visibility of the product images (a white background makes sure that there are no contrast issues between background and foreground).
Layout
As an option, a headline can be displayed which appears as the first element in this module. Tabs may also optionally be added to divide the products into groups.
There are 2 layout options for this module with multiple products: stack and carousel.
- Stack displays the cards in a grid on desktop and tablet, and in a single column on mobile.
- Carousel displays the product tiles in a carousel on both desktop and mobile.
For displaying a single product, use layout for one product with optional headline or tabs.
Products
The product tiles are not editable, all data is pulled directly from PDH/PIM.
Product ribbons can be used to display products as well as function as an easy access point leading customers to a PLP or a PDP. The product ribbon therefore acts as a transport module from more explanatory pages (eg. an application page) to a PLP or PDP.
Product ribbons can be used on most page types where you would want to guide the customer to a product page (PLP/PDP) - the only generalisable exceptions being PDPs, PLPs and pages where the main content is a form.
The placement of the product ribbon is often in the middle to lower sections in the page hierarchy, and never used more than one time in the same page, instead use the tabs functionality.
This module is designed only to present products, and should not link to content pages such as case studies, events, applications, etc. Instead, use the Preview Cards or Wayfinding Card modules for these purposes.
Examples of use
DO: Use advised amount of tabs, 2-4 and correct text styling. Read more about typography.
DO: Use the single product ribbon in cases where the presentation of a sole product is intended.
DON’T: Use the multible product ribbon when displaying less than 2 products.