Skip to main content

Color

ClassPropertySCSSHEX
.bx--tilebackground-color$ui-01#ffffff
.bx--tileborder$ui-03#dfe3e6
.bx--tile:focusborder$brand-01#3d70b2
.bx--tile--is-selected
.bx--tile--is-selected:hover
.bx--tile--is-selected:focus
border$brand-01#3d70b2
.bx--tile__chevron svgfill$brand-01#3d70b2
.bx--tile__checkmark svgfill$brand-01#3d70b2
.bx--tile--clickable:hover
.bx--tile--selectable:hover
.bx--tile--expandable:hover
border$ui-04#8897a2

Layer

ClassLayer, ElevationBox-shadow
.bx--tileRaised, 20 1px 2px 0 rgba(0,0,0,0.10);

Structure

ClassPropertypx / remSpacing token
.bx--tilemin-height64 / 4-
.bx--tilemin-width128 / 8-
.bx--tilepadding16 / 1 (minimum)$spacing-md

Structure and spacing measurements for Tile Structure and spacing measurements for Tile | px / rem

Structure and spacing measurements for Tile Structure and spacing measurements for Tile | px / rem

Proportions for grid

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