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
State of the base tile

The example shows layering tokens applied across layers in the Gray 100 theme.

Interactive states

ElementPropertyColor token
Tile:hoverbackground-color$layer-hover *
Tile:focusborder$focus
Tile:selectedborder$border-inverse
Tile:disabledborder$border-disabled
Icon:disabled (or pictogram)svg$icon-disabled
Text:disabledtext color$text-disabled

Base tile

Base tile doesn’t have a border. It’s not interactive, but can have interactive elements. Base tile only has the enabled state.

State of the base tile

Clickable tile

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

States of the clickable tile

Selectable tiles

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

States of the single-select tile

Expandable tiles

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

States of the expandable tile

Typography

The default token for the title is $body-compact-01, although it can be altered as needed by the product teams.

ElementFont-size (px/rem)Font-weightType token
Tile14 / 0.875Regular / 400$body-compact-01
Description14 / 0.875Regular / 400$body-compact-01

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