Skip to main contentCarbon Design System

Tile

Color

The tile border applies to clickable, selectable and expandable tiles — not to base tiles.

ElementPropertyColor token
Tile: backgroundbackground-color$layer *
Tile borderborder$border-tile *
Iconsvg$icon-interactive
Checkbox iconsvg$icon-primary
Checkmark iconsvg$icon-primary
Chevron iconsvg$icon-primary
States of the base tile

Interactive states

ElementPropertyColor token
Tile: hoverbackground-color$layer-hover *
Tile: focusborder$focus
Tile:selectedborder$border-inverse

Base tile

Base tile doesn’t have a border. It’s not interactive, but can have interactive elements.

States of the base tile

States of the base tile

Clickable tile

Clickable tile has states: enabled, hover, and focus.

States of the clickable tile

States of the clickable tile

Selectable tiles

Selectable tiles have four states: enabled, hover, focus, and selected.

States of the single-select tile

Expandable tiles

Expandable tiles have three states: enabled, hover, and focus.

States of the expandable tile

Structure

ElementPropertypx / remSpacing token
Tilemin-height64 / 4
min-width128 / 8
padding (minimum)16 / 1$spacing-05
Structure and measurements for tiles
Structure and measurements for single-select, multi-select, and expandable tiles

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