Skip to main contentCarbon Design System

Tile

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

Color

Base tile color

ElementPropertyColor token
Containerbackground-color
$layer
*
Texttext color
$text-primary
Base tile color

Base tile color

Clickable tile color

Clickable tiles have an available feature flag.

ElementPropertyColor token
Containerbackground-color
$layer
*
Texttext color
$text-primary
Border (feature flag)border
$border-tile
*
Iconsvg
$icon-interactive

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

Clickable tile color with the feature flag enabled
Clickable tile interactive state color
StateElementPropertyColor token
HoverContainerbackground-color
$layer-hover
*
FocusContainerborder
$focus
DisabledContainerborder
$border-disabled
Texttext color
$text-disabled
Iconsvg
$icon-disabled

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

Clickable tile interactive color with the feature flag enabled

Selectable tile color

Selectable tiles have available feature flags.

ElementPropertyColor token
Containerbackground-color
$layer
*
Texttext color
$text-primary
Borderborder
$border-tile
*
Iconsvg
$icon-primary

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

Selectable tile color with the feature flag enabled
Selectable tile interactive state color
StateElementPropertyColor token
HoverContainerbackground-color
$layer-hover
*
Hover selectedContainerbackground-color
$layer-hover
*
border
$border-inverse
SelectedContainerborder
$border-inverse
FocusContainerborder
$focus
DisabledContainerborder
$border-disabled
Texttext color
$text-disabled
Iconsvg
$icon-disabled

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

Selectable tile interactive color with the feature flag enabled

Expandable tile color

Expandable tiles have an available feature flag.

ElementPropertyColor token
Containerbackground-color
$layer
*
text color
$text-primary
border
$border-tile
*
Iconsvg
$icon-primary
Expandable tile color with the feature flag enabled
Expandable tile interactive state color
StateElementPropertyColor token
HoverContainerbackground-color
$layer-hover
*
FocusContainerborder
$focus
DisabledContainerborder
$border-disabled
Texttext color
$text-disabled
Iconsvg
$icon-disabled

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

Expandable tile interactive color without interactive elements and the feature flag enabled
Expandable tile interactive color with interactive elements and feature flag enabled

Typography

The default token for tile titles is

$body-compact-01
, although it can be customized as needed by product teams.

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

Structure

Base tile structure

ElementPropertypx / remSpacing token
Containermin-height64 / 4–
min-width128 / 8–
Contentpadding-top, padding-bottom16 / 1
$spacing-05
padding-left, padding-right16 / 1
$spacing-05
Structure and spacing measurements for base tile | px / rem

Structure and spacing measurements for base tile | px / rem

Clickable tile structure

ElementPropertypx / remSpacing token
Containermin-height64 / 4–
min-width128 / 8–
Contentpadding-top, padding-bottom16 / 1
$spacing-05
padding-left, padding-right16 / 1
$spacing-05
Iconpadding-top, padding-bottom12 / 0.75
$spacing-04
padding-left, padding-right12 / 0.75
$spacing-04
size20px–
Structure and spacing measurements for clickable tile with eth feature flag enabled | px / rem

Structure and spacing measurements for clickable tile with the feature flag enabled | px / rem

Selectable tile structure

ElementPropertypx / remSpacing token
Containermin-height64 / 4–
min-width128 / 8–
Contentpadding-top, padding-bottom16 / 1
$spacing-05
padding-left, padding-right16 / 1
$spacing-05
Iconpadding-top, padding-bottom16 / 1
$spacing-05
padding-left, padding-right16 / 1
$spacing-05
size16px–
Structure and spacing measurements for selectable tile with feature flags | px / rem

Structure and spacing measurements for selectable tile with the feature flags enabled | px / rem

Expandable tile structure

ElementPropertypx / remSpacing token
Containermin-height64 / 4–
min-width128 / 8–
Contentpadding-top, padding-bottom16 / 1
$spacing-05
padding-left, padding-right16 / 1
$spacing-05
Iconpadding-top, padding-bottom16 / 1
$spacing-05
padding-left, padding-right16 / 1
$spacing-05
size16px–
Linkpadding-bottom16 / 1
$spacing-05
padding-left, padding-right16 / 1
$spacing-05
Structure and spacing measurements for expandable tile with the feature flag enabled | px / rem

Structure and spacing measurements for expandable tile with the feature flag enabled | 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 label is present. Unless specified, all other tokens in the components remain the same as the non-AI variants.

For more information on the AI style elements, see the Carbon for AI guidelines.

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 labelsizemini

* 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.