Skip to main contentCarbon Design System

Tile

The following page documents visual specifications such as color, typography, and structure.

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

* Denotes a contextual color token that will change values based on the layer it is placed on.

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

* Denotes a contextual color token that will change values based on the layer it is placed on.

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

AI presence

The following are the unique styles applied to the components when the AI slug is present. Unless specified, all other tokens in the components remain the same as the non-AI variants.

More information about designing for AI guidelines is coming soon.

ElementPropertyToken / Size
Tile:backgroundbackground-color$layer *
box-shadow$ai-drop-shadow
inner-shadow$ai-inner-shadow
Linear-gradient:backgroundstart$ai-aura-start
top$ai-aura-stop
Linear-gradient:borderstart$ai-border-start
stop$ai-border-stop
AI slugsizemini

* Denotes a contextual color token that will change values based on the layer it is placed on.

Structure and spacing measurements for tile with AI presence

Structure and spacing measurements for tile with AI presence

Feedback

Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.