Tile

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.

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:

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

Tiles can function or be implemented in four ways—base, clickable, selectable, or expandable. These variations of tiles are flexible enough to support a variety of different use cases when building more complicated card features.

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 button or a link.

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.

Selectable tiles work well for presenting options to a user in a structured manner, such as a set of pricing plans. Selectable tiles may contain internal CTAs (like links to docs) if the internal CTA is given its own click target.

Selectable tiles can either have a single-select state working like a radio button, or multi-select state working as a checkbox.

Expandable tiles are helpful for hiding and showing large amounts of content to a user. When expanded, tiles push content down the page. They allow the user to specifically focus on featured content while having access to the rest of the information. Expandable tiles can contain internal CTAs (like links to docs) if they are given their own click targets.

The width varies depending on three basic gutter modes: wide, narrow, and condensed. Tile height varies depending on the amount of content placed within it, but applies the spacing and follows Carbon’s standard aspect ratios. The minimum height starts with 2:1 aspect ratio. As the content grows, set vertical spacing between sections within the content area.

On clickable tiles, use the arrow icon as default with the $icon-interactive token. Place the icon at the bottom right to indicate navigation. Avoid confusing the user with multiple click targets (like interactive links or buttons) on clickable tiles.

On base tiles, place the interactive link at the bottom left or the button at the bottom to indicate call-to-action items.

Tile groups are useful for aligning tiles that have a strong relationship. Tile groups flow horizontally from left to right usually and have similar hierarchical importance as with navigation or catalog tiles.

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

The behaviors listed in this section are universal across all tile variants. For behaviors that are unique to each variant, see each of the component variants sections below.

For detailed visual information about the various states for this component, see the Style tab.

Users can trigger an item by clicking anywhere in any tile container, except base tiles.

Expandable tiles can either be triggered as a whole or contain internal CTAs only if they are given their own click targets. In these cases, the tile’s click target is reduced to only the icon button.

Specific keyboard interactions will depend on the type of tile you are using and what content it contains but all types of tiles can take focus.

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

More information about designing for AI guidelines is coming soon.

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.