Skip to main contentCarbon Design System

Tile

Color

ClassPropertyColor 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

ClassPropertypx / 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✅✅