Skip to main contentCarbon Design System

Tile

Tiles are a highly flexible component for displaying a wide variety of content, including information, getting started, how-to, next steps, and more.

Experimental tiles are now available. This addition enhances accessibility and only applies to the visual appearance, not the function of tiles. Though we are not deprecating the current tiles, we encourage all design teams to use the new experimental tiles in their products moving forward.

Overview

Carbon ships a basic tile structure that responds to the grid. Tiles can contain type, images and/or blocks of color. However, Carbon tiles have no pre-set styles for the content inside. Tile usage guidance focuses solely on basic tile functions—not the information hierarchy within the tile or guidance around additional interactive elements that the tile may contain.

Example image of tiles on the dashboard

Tiles versus Cards

Tiles are simple and foundational. Cards can be very complex. Cards are built upon the tile foundation and have various patterns of information hierarchy, multiple actions, overflow menus, selectable features, etc. Carbon does not have a Card pattern yet, but we link out to several card patterns within our pattern asset library (PAL) ecosystem below:

When to use

Tiles are reusable components that provide shortcuts to building cards and other modules. Use tiles to group related information in flexible containers. Here are some common use cases for when to use tiles:

  • To contain related groupings of information or actions
  • To guide users to take actions or navigate
  • To present options for single or multiple selections
  • To hide or show large amounts of content

When not to use

Tiles reside in the same plane as the background layer—they do not have elevation. Tiles organize essential information and have the same visual hierarchy as content within the same page.

Do not add a drop shadow to tiles and use them on the screen to reveal secondary information, actions, or notifications. Use modals, popover, and dialogs which have elevation and are appropriate for this function instead.

Live demo