Skip to main content

Indicator

Description​

Indicators are simple, non-interactive displays of information (e.g., status) in a variety of visual forms.

Coming Soon - example of an indicator

Usage​

Labels​

Indicators with a text label should use no more than one or two words and avoid acronyms or abbreviations.

Badge​

Badges are visually similar to chips and can use color to communicate meaning such as status. They may have an optional left or right icon, but not both.

Maintain a minimum of 4px vertical and horizontal space between badges.

Flag​

Flags can indicate status or provide light merchandizing.

When to use a flag:

  • Indicate a new product
  • Show a price has dropped
  • Indicate something has expired. A flag may have an optional left icon.

Flags can use any brand or status color for the surface. However, the surface color must have good contrast with a black or white text label.

Only use one or two flags within a parent element (e.g., a card or vehicle listing).

Ribbon​

Like flags, ribbons are used to indicate status or provide merchandizing and have the same color options. However, a ribbon does not have an icon, and it can potentially overlay content, such as a vehicle image.

Only use one ribbon within a parent element.

Manheim Specific Styles​

Auction Lights​

Auction Lights are a specialty indicator used to digitally replicate live, in-lane auction lights. The digital version uses the same colors to indicate the same meaning as the in-lane version.