​​​​​​Ignite Components

​The Ignite templates have a  set of components that can be customized to display your apps data and actions. Each component has constraints and guidelines to keep designs consistent and usable across various templates. These components are the foundation of how customers will use your app.

  1. Badge
  2. BadgeRow
  3. Card
  4. CardRow
  5. CardDetails
  6. IgniteChooser
  7. IgniteChooserOption
  8. IgniteListItem
  9. IgniteList
  10. IgnitePlaceMarker​


​​​​Badge

​Used in: Badge Row, Explore

​​​​How to use:

Use badges to bring quick selection and filtering options to the forefront while browsing, searching, or customizing.

Variations:

  • Single line
  • Double line
  • Icon + single line
Note: The same Badge variation must be used for all Badges in a BadgeRow

​What can change:

  • Action
  • Text color
  • Background color
  • Icon
  • Icon color​

​Guidelines​:

  • Keep text to 24 characters without an icon, and 16 characters with an icon
  • Contrast restrictions apply and some values may be overridden to meet restrictions

BadgeRow

Used in: Ignite Search, Explore

Variations: 

  • Single line
  • Multi line

What can change:

  • Badge alignment
    • Start
    • Center
  • Badge spacing
    • Packed
    • Spread

Guidelines:

  • All badges must be the same variation 
  • The amount of badges shown is dependent on display size (typically 4-6 badges fit on a screen)
  • Badges will wrap to another row if using multi line variation
  • A max of 12 badges is allowed per BadgeRow​

Card

Used in: CardRow, Explore

How to use:

Cards are used to group information visually and can be organized in a collection of related actions

Variations: 

  • Single line (centered text)
  • Double line
  • Icon (CardLarge only)

What can change: 

  • Type
    • Small
    • Large
  •  Background
    • Color
    • Image (while parked)
  • CardLarge icon
  • CardLarge icon color
  • Secondary line content
    • Icon
      • Color
    • Ratings
    • Text
      • Color

Guidelines:

  • Keep text to 24 characters
  • Card background will default to background color while driving
  • Background images and colors may be darkened with an opaque overlay to improve text legibility

Examples​:


CardRow

Used in: Ignite Search, Explore

Variations: 

  • Single line
  • Multi line

What can change:

  • Card alignment
    • Start
    • Center
  • Card spacing (do some examples)
    • Packed
    • Spread

Guidelines:

  • All cards must be the same size variation 
  • If using centered text, all cards in the CardRow must use centered text
  • A max of 6 cards is allowed per CardRow
  • The amount of cards displayed is dependent on display size (typically 2-4 cards fit on a screen)​

CardDetails

Used in: ListDetail

How to use:

Display detailed information about a selected item from the IgniteList

Contains: 

  • Header row
  • Image/icon
  • Metadata
  • IgniteList

What can change: 

  • Image/Icon
  • Text color
  • Row type

Guidelines:

  • Keep data glanceable
  • Use icons to improve usability​

IgniteChooser

Used in: ListDetail

How to use:

Entry point to dialog used to change list content with IgniteChooserOptions

Variations: 

  • Single line
  • Icon + single line

What can change: 

  • Icon
  • Action icon

Guidelines:

  • Displayed text represents selected option from IgniteChooserOption list​

IgniteChooserOption

Used in: IgniteChooser, ListDetail

How to use:

Options to quickly change what is displayed in the list with a single selection

Variations: 

  • Single line
  • Icon + single line

What can change: 

  • Icon
  • Label
  • Action

Guidelines:

  • Max of 5 options allowed
  • Variations must be consistent

IgniteDetailsInfo

Used in: Overview

How to use:

Display a summary of relevant information and actions

Variations: 

  • Parked (additional information in scrolling list)
  • Driving (minimal information)
  • Route

What can change: 

  • Header
  • Secondary buttons
  • Text color

Guidelines:

  • Work in progress

NOTES: Consider if we should have differences Header + variant

IgniteListItem

Used in: IgniteList, ListDetails, Overview, Ignite Search

How to use:

Common element used in most templates to organize information in a scannable format

Variations: 

  • Single line
  • Double line
  • Icon/image + single line
  • Icon/image + double line
  • With button*
  • Split*
  • Ordered*

What can change: 

  • Icon/Image
  • Secondary line content
    • Text
    • Ratings
    • Icons
  • Text color
  • Icon color
  • Number color (Ordered variation only)

Guidelines:

  • ​Work in progress

IgniteList

Used in: ListDetails

How to use:

Vertical grouping of IgniteListItems

Variations: 

  • Work in progress

What can change: 

  • Work in progress

Guidelines:

  • 10 IgniteListItems max in a list*

*OEM can limit or expand the amount of items allowed in a list

IgnitePlaceMarker

Used in: Overview, StreamingMap

How to use:

Customize how POIs are displayed on the map

Variations: 

  • Icon
  • Text
  • Image

What can change: 

  • Icon/Image
  • Text color
  • Icon color
  • Marker color

Guidelines:

  • Text variations should be limited to a maximum of 3 characters​​