Vehicle Card Component | UX/UI

Updated on February 14, 2018

Overview and Usage:

The vehicle card component is designed to encapsulate information about the quality status of a vehicle ad. Various elements allow the user to access more information about the inventory unit. This component is lightweight, expansible and fully responsive by default. This page shows various versions and iterations of the component. 


Card Component Includes:

  • Vehicle Image
  • New or Used Ribbon
  • Vehicle Title
  • Stock Number
  • Vin Number
  • Internet Price
  • Score Bar
  • Days in stock
  • Number of pending recommendations
  • Live or Staging status
  • "Review" Button
  • "Hide" Button
  • "View Live" Action
  • Flagging Options

A) Vehicle card with "hide from list" option and modal window

NEW

2015 Volvo V60

Stock #: ABC123 
Vin #: 55256767 
$18,300
Inventory Quality Score
60

17 Days in Stock View Live

6recommendations

B) Vehicle card with drop down menu options

NEW

2015 Volvo V60

Stock #: ABC123 
Vin #: 55256767 
$18,300
Inventory Quality Score
60

17 Days in Stock View Live

6recommendations

Inventory Page Card

NEW

2015 Volvo V60

Stock #: ABC123 
Vin #: 55256767 
$18,300
Inventory Quality Score
60

17 Days in Stock View Live