Brand Design System
Know what you’re looking for? Type to search
Select a brand
Know what you’re looking for? Type to search
  1. One Digital Platform
  2. Core Library
  3. Feature List

Featured List

Feature List is a visual navigation component that directs users to Products, Categories, Information, Services and more. They are generally found within Homepage and other Landing Pages.

Anatomy

anatomy image

 

Basic Information
Brand: Global
Breakpoint: All breakpoints
 

Elements
1. Headline
2. Feature List Item
3. Accordion (Mobile only; not shown)

General Usage

The Brand/Category Feature List is an authorable component used primarily to present popular Brands to the user. Alternatively, it can also be used to display Categories when more than 4 are required such as Automotive sub-categories or Colour. This component can be used within Department, Category or Brand Landing Pages (LPs) linking to Brand or Category pages.

This component can be configured as a pattern of 4, 6, 8  or 12 cards on Desktop, and 4 stacked on Mobile in default, expanding to show patterns of 6, 8 or 12. Each element is anchored vertically to create horizontal alignment across the row.

Rules

DODON'T
  • Use high quality Brand or Category images approved by CTC
  • Ensure alignment to the brand’s Tone of Voice when writing Headline and Descriptive Copy
  • Structure content so rich media (images, video, icons) is followed by text content and with any actions at the bottom of the card, establishing a clear hierarchy
  • Create cards that are scannable by carefully considering the content to avoid cognitive overload
  • Implement UI controls (i.e. buttons, tooltips) to allow the user to interact with the card where required
  • Ensure card widths are consistent per grouping
  • Use consistent horizontal and vertical spacing
  • Pair Feature Lists with an appropriate title
  • Display the Expanded state as default (Mobile only)
  • Treat icons inconsistently in style or colour
  • Place banners in the middle of rows of Product Cards, this may communicated to the user that it’s the end of the product list
  • Use Feature Lists during Cart or Checkout flow and deter user from completing their transaction
  • Transform or flip Feature List cards to add additional information
  • Overlap cards

Test Title

Test Caption 

close