Black Lives Matter. Support the Equal Justice Initiative.
Skip to main contentCarbon Design System

Tile

Color

ClassPropertyColor token
.bx--tilebackground-color$ui-01
.bx--tile:focusborder$focus
.bx--tile:hoverbackground-color$hover-ui
.bx--tile--is-selectedborder$ui-05
.bx--tile__chevronsvg$icon-01
.bx--tile__checkmarksvg$icon-01
.bx--tile__checkmark:hoversvg$icon-02

Structure

ClassPropertypx / remSpacing token
.bx--tilemin-height64 / 4–
.bx--tilemin-width128 / 8–
.bx--tilepadding (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✅✅