Class Property SCSS HEX .bx--tile
background-color $ui-01 #ffffff .bx--tile
border $ui-03 #dfe3e6 .bx--tile:focus
border $brand-01 #3d70b2 .bx--tile--is-selected
.bx--tile--is-selected:hover
.bx--tile--is-selected:focus
border $brand-01 #3d70b2 .bx--tile__chevron svg
fill $brand-01 #3d70b2 .bx--tile__checkmark svg
fill $brand-01 #3d70b2 .bx--tile--clickable:hover
.bx--tile--selectable:hover
.bx--tile--expandable:hover
border $ui-04 #8897a2
Class Layer, Elevation Box-shadow .bx--tile
Raised, 2 0 1px 2px 0 rgba(0,0,0,0.10);
Class Property px / rem Spacing token .bx--tile
min-height 64 / 4 - .bx--tile
min-width 128 / 8 - .bx--tile
padding 16 / 1 (minimum) $spacing-md
Structure and spacing measurements for Tile | px / rem
Structure and spacing measurements for Tile | px / rem
icons Proportions for grid
XL 1600-1200 L 1200-992 M 992-768 S 768-576 XS 576-0 100% ✅ ✅ ✅ ✅ ✅ 1/2 ✅ ✅ ✅ ✅ ✅ 2/3 ✅ ✅ ✅ ✅ 1/3 ✅ ✅ ✅ ✅ 1/4 ✅ ✅ ✅ ✅ 1/6 ✅ ✅