Selectable Tiles

Planned

Selectable tiles provide a way for users to make selections between a series of possibilities; the selection of which could be a single-select or multi-select.

Selectable Tiles

Anatomy

Selectable tiles are interactive elements that appear in either a scrollable group or a stacked group

  1. Container (103 x 96)
  2. Avatar
  3. Primary label — Caption
  4. Secondary label — Overline (optional)

Min/max

The primary label will wrap to up to two lines, then truncate if no more space is available. For the secondary label, Once the horizontal space begins to run out, the font size will dynamically adjust to a minimum font size of 8px at which point the label will truncate. 


When the primary label wraps, the tile will become taller — thus all the tiles in the group need to adjust to become the same height.

Scrollable group

A group of selectable tiles that can scroll horizontally is ideally reserved for mobile interactions, but there could be scenarios where this makes sense on wider screens as well. The height and width of the individual tiles is fixed to ensure a consistent height, width, and visual weight for each tile. This width is an effort to balance the need to provide enough space for the label not to wrap while also ensuring more than two tiles are visible on screen without scrolling. 

Stacked group

Instead of overflowing horizontally, selectable tiles can wrap and stack up vertically. The height and width of the individual tiles is fixed to ensure a consistent height, width, and visual weight for each tile.

Specs

Color

Element Property Value
Container (static) Background color ∆colorBrandedAffordance100
Avatar (static) Background color None
Avatar (static) Icon color ∆colorBrandedAffordance900
Primary label (static) Font color ∆colorBrandedAffordance900
Secondary label (static) Font color ∆colorBrandedAffordance900
Container (hover) Background color ∆colorBrandedAffordance200
Avatar (hover) Background color None
Avatar (hover) Icon color ∆colorBrandedAffordance900
Primary label (hover) Font color ∆colorBrandedAffordance900
Secondary label (hover) Font color ∆colorBrandedAffordance900
Container (pressed) Background color ∆colorBrandedAffordance400
Avatar (pressed) Background color None
Avatar (pressed) Icon color ∆colorBrandedAffordance900
Primary label (pressed) Font color ∆colorBrandedAffordance900
Secondary label (pressed) Font color ∆colorBrandedAffordance900
Container (selected) Background color ∆colorBrandedAffordance
Avatar (selected) Background color None
Avatar (selected) Icon color ∆colorBrandedAffordanceOn
Primary label (selected) Font color ∆colorBrandedAffordanceOn
Secondary label (selected) Font color ∆colorBrandedAffordanceOn
Container (disabled) Background color ∆colorBrandedAffordance100
Avatar (disabled) Background color None
Avatar (disabled) Icon color ∆colorBrandedAffordance900 ∆colorPlatformAlpha75
Primary label (disabled) Font color ∆colorBrandedAffordance900 ∆colorPlatformAlpha75
Secondary label (disabled) Font color ∆colorBrandedAffordance900 ∆colorPlatformAlpha75

Spacing

With secondary label

Without secondary label

Stacked & scrollable

States


Theming

Color

Element Property Value
Container (static) Background color ∆colorBrandedAffordance100
Avatar (static) Icon color ∆colorBrandedAffordance900
Primary label (static) Font color ∆colorBrandedAffordance900
Secondary label (static) Font color ∆colorBrandedAffordance900
Container (hover) Background color ∆colorBrandedAffordance200
Avatar (hover) Icon color ∆colorBrandedAffordance900
Primary label (hover) Font color ∆colorBrandedAffordance900
Secondary label (hover) Font color ∆colorBrandedAffordance900
Container (pressed) Background color ∆colorBrandedAffordance400
Avatar (pressed) Icon color ∆colorBrandedAffordance900
Primary label (pressed) Font color ∆colorBrandedAffordance900
Secondary label (pressed) Font color ∆colorBrandedAffordance900
Container (selected) Background color ∆colorBrandedAffordance
Avatar (selected) Icon color ∆colorBrandedAffordanceOn
Primary label (selected) Font color ∆colorBrandedAffordanceOn
Secondary label (selected) Font color ∆colorBrandedAffordanceOn
Container (disabled) Background color ∆colorBrandedAffordance100
Avatar (disabled) Icon color ∆colorBrandedAffordance900 ∆colorPlatformAlpha75
Primary label (disabled) Font color ∆colorBrandedAffordance900 ∆colorPlatformAlpha75
Secondary label (disabled) Font color ∆colorBrandedAffordance900 ∆colorPlatformAlpha75

Shape

Element Property Value
Container Large ∆shapeBranded


Placement


Behavior

Developer Docs

Vue Developer Docs

Component documentation coming soon!