Tile

ECT approvedUpdated May 21, 2026

Description

A tile is a container for content that may relate to a single subject or a group of related subjects.
It can contain both non-interactive and interactive elements.
A tile can use the Layout component (flexbox CSS model) to achieve responsive designs by arranging swappable blocks within flexible containers.

Warning

Choosing the right component If you need a container that is interactive and opens a detail page, use the Card component. If you need a tile for product subscriptions or marketing content, use a Tile select. If you need to present comparative data, like a list of numbers arranged structurally in an HTML table, use the Table component. For example, on profit and loss reports.

Anatomy

Anatomy

Types

Tiles come in 2 types:

Outlined tiles use a visible border to define their container, providing strong visual emphasis.
Filled tiles offer only a subtle separation from the background, resulting in a lower level of emphasis compared to outlined tiles.

Standard

Inverse

Alt

Alt inverse

Negative

Positive

Unavailable

Footer

Variations

Status keyline

Use a status keyline to communicate the status of the content within the tile.
Often used within task tiles.

Neutral

Informational

Important

Positive

Negative

Warning

Inverse style

Used primarily within subscription tiles.
Status footers indicate whether an object has been selected or is currently active.

Neutral

Positive

Color mode

Light

Dark

Adding a sorting dropdown allows users to sort a stack of tiles in ascending or descending order.

For more complex use cases which require additional options and control, see the filtering pattern.

Sorting dropdown

Dos and don'ts

Technical example

Tile component implemented in Carbon.

Requirements

Users should be able to:

Identify a tile as a block of related content.
Navigate to and interact with elements within the tile.

Interactions

The tile itself is non-interactive and does not require user input.

Keyboard interactions

If the tile contains interactive content:

Tab. Moves focus from the previous interactive element on the page to the interactive element within the tile.
Enter or Space. Activates a button within the tile.
Pressing ‘enter’ on a link within the tile activates the link.

Design considerations

Tiles are used to present types of related content for a single topic or purpose.
Each tile should be identifiable as a unique section of content.
The purpose of content within a tile should be clearly differentiated from other content on the page.
Use consistent spacing, padding, and layout to visually group content within the tile.
Where colour is used to convey information, make sure the same information is available elsewhere in text.

Development considerations

If tiles are part of a list group, make sure they have clear list and list item markup. This helps screen reader users understand the differences between sections of content.
Make sure the group of tiles is wrapped in an unordered listul , or wrapped in a container with role=”list”.
Make sure that each tile is wrapped in a list itemli or wrapped in a container with role=”listitem”.
Make sure that list items are direct children of a list, to ensure correct html structure.
Note: Voiceover will ignore any list semantics if list-style: none is applied in CSS. To ensure list items are applied, use the list and listitem roles.

Date	Changes
March 2026	Added "Sorting dropdown" section.Added Dos and don'ts assets for Sorting feature.
October 2025	Split out tile into 2 distinct types:OutlinedFilledMoved Roundness examples into Variations.In Variations added descriptions to Roundness, and added Padding examples. Added an example of inverse styling. Removed sweeping and marketing roundness.In Footer variations removed examples of footer with buttons and link.In Dos and don'ts added examples for roundness and footer customization.
August 2025	Updated guidance on the accessibility tab.
March 2025	Created two variants ‒ Tile: simple and Tile: flexbox, with the simple variant designers can swap a DS or custom component they have created, with the flexbox variants the designers can start constructing more complex layouts with DS and custom components.We have added the capability to add a status border on the left with the possibility to add the following status colors: info, warning, positive, negative, important and neutral.
September 2024	New version created. Previous versions archived in the frozen Web and Product design system.

Description

Anatomy

Types

Variations

Status keyline

Status Footer

Color mode

Sorting dropdown

Dos and don'ts

Technical example

Requirements

Interactions

Keyboard interactions

Design considerations

Development considerations