Skip to main contentCarbon Design System

Tile

Color

ElementPropertyColor token
Tilebackground-color$layer *
Tile: focusborder$focus
Tile: hoverbackground-color$layer-hover *
Tile: selectedborder$border-inverse
Chevron iconsvg$icon-primary
Checkmark iconsvg$icon-primary

* Denotes a contextual color token that will change values based on the layer it is placed on.

Structure

ElementPropertypx / remSpacing token
Tilemin-height64 / 4
min-width128 / 8
padding (minimum)16 / 1$spacing-05
Structure and spacing measurements for tile

Structure and spacing measurements for tile | px / rem

Proportions for grid

PercentageXL 1600-1200L 1200-992M 992-768S 768-576XS 576-0
100%
1/2
2/3
1/3
1/4
1/6