Tile

Tile is a component that can contain various content and nested components and can have interactive functions. Tile is often laid out in groups, is a different color than the UI background, and responds to the grid. Tiles have no pre-set styles and are purposely flexible so product teams can determine their tile content for specific use cases.

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, but we link out to several card patterns within our pattern asset library (PAL) ecosystem below:

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:

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

Do not add a drop shadow to tiles and use them to reveal secondary information, actions, or notifications. Use modals, popovers, and dialogs that have elevation and are appropriate for this use case instead.

Tiles can have different functions and are implemented in four ways: base, clickable, selectable, and expandable. These tile variants are flexible to support various use cases when building more complicated card features.

Feature flags have been added to the clickable, selectable, and expandable variants of tile to improve accessibility and changes its visual appearance, not its functionality. For code-specific feature flag information, refer to the Code tab. These current variants of tile are not being deprecated, but teams are encouraged to use the feature flag tile for their products moving forward.

The following are the feature flag changes made to tile.

Tile width varies depending on the three basic gutter modes: wide, narrow, and condensed. Tile height varies depending on the content placed within it while using spacing tokens and following aspect ratios. The minimum tile height is a 2:1 aspect ratio. As the content grows, set vertical spacing between sections within the content area.

Tile groups are helpful when aligning tiles that have a strong relationship. Tile groups usually flow horizontally from left to right and have hierarchical importance, similar to navigation or catalog tiles.

There are three basic layouts for tiles: standard, vertical masonry, and horizontal masonry. The standard layout is the the most commonly used.

Tile text can vary based on the content. It can consist of heading text, body text, label text, and include interactive elements.

For further content guidance, see Carbon’s content guidelines.

Base tiles are used to display information to the user, such as features or services offered. Base tiles are often seen on marketing pages to promote content or on highly interactive dashboards. These tiles can have internal calls-to-action (CTAs), such as a buttons or links.

When placing interactive elements within base tiles, place links at the bottom left of the tile and span buttons in width at the bottom to indicate call-to-action items.

Base tiles only have an enabled state because they are not operable by a mouse or keyboard. For more information about base tile states, see the Style tab.

Base tiles are not operable by a mouse unless they contain interactive elements within them. Interactive elements can be clicked on and activated.

Base tiles can have interactive elements within them, like links or buttons, which can be clicked on.

Clickable tiles can be used as navigational elements that redirect the user to a new page. In these situations, the entire tile is in a clickable state. Due to accessibility concerns, clickable tiles cannot contain separate internal CTAs but can contain pictograms, icons, or media such as illustrations or images.

Clickable tile has an available feature flag.

On clickable tiles, use the arrow icon paired with the

$icon-interactive

Clickable tiles have enabled, hover, focus, and disabled states. For more information about clickable tile states, see the Style tab.

The clickable tile is triggered by clicking anywhere within the tile container.

Clickable tiles can be triggered by clicking anywhere on the tiles container.

Selectable tiles are used to present different options for users to select from. Selectable tiles can contain internal CTAs, like links to documentation, if the CTA is given a click target of its own in addition to the tile’s click target. Selectable tiles can either have single-selection or multi-selection.

Selectable tile has available feature flags.

Use single-select tiles when the user can only select one tile from a tile group.

Use multi-select tiles when the user can select multiple tiles from a tile group.

Selectable tiles have enabled, hover, hover selected, selected, focus, and disabled states. For more information about base tile states, see the Style tab.

The clickable tile is triggered by clicking anywhere within the tile container.

Selectable tiles can be selected by clicking anywhere on the tiles container.

Expandable tiles are used to reveal or hide additional information to the user and can be expanded and collapsed differently depending on their content. If an expandable tile does not have interactive elements, clicking anywhere in the tile expands and collapses the tile. If an expandable tile has interactive elements, the chevron icon button expands and collapses the tile.

Expandable tile has an available feature flag.

Use the container expansion functionality to expand and collapse the tile when there are no interactive elements.

Use the button expansion functionality to expand and collapse the tile when including interactive elements.

Expandable tiles have enabled, hover, focus, and disabled states. For more information about expandable tile states, see the Style tab.

If the expandable tile does not have interactive elements, it can be expanded or collapsed by clicking anywhere on the tiles container. If the expandable tile has interactive elements, it can be expanded or collapsed by clicking on the button in the bottom right corner. Interactive elements within a tile can also be clicked on and have their own click targets.

Tile has a modification that takes on the AI visual styling when the AI label is present in the container. The AI variants function the same as the normal versions except with the addition of the AI label which is both a visual indicator and the trigger for the explainability popover.

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

To learn more about how to build tiles correctly on the grid, see Carbon’s 2x grid.

The aspect ratio is important when building tiles and images. For further guidance, see Carbon’s aspect ratio and its implementation.

When in doubt, use full-span button alignment within tiles. For further guidance, see Carbon’s buttons.

Link has variants depending on the context. For further guidance, see Carbon’s link.

Spacing helps deliver clear and functional layouts. For further guidance, see Carbon’s spacing.

Hagan Rivers, Interactions design with cards/tiles (Medium, 2017)

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