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