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 are interactive elements that appear in either a scrollable group or a stacked group.
- Container (103 x 96)
- Primary label — Caption
- Secondary label — Overline (optional)
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.
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.
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.
With secondary label
Without secondary label
Stacked & scrollable
Developer DocsVue Developer Docs
Component documentation coming soon!