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



      This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.

      Tile variants

      The experimental tiles are applicable to clickable, selectable and expandable tiles — not to base tiles.

      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.

      VariantPurpose
      BaseFor high-level, short, and digestible content pieces such as features, plans, or services offered
      ClickableFor prompting an action, navigating or directing to other pieces of information about the subject matter
      SelectableFor presenting options to a user in a structured manner, such as a set of pricing plans
      ExpandableFor hiding and revealing a large amount of content to focus on specific pieces of information

      Base

      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.

      Example image of base tiles

      Clickable

      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.

      Example image of clickable tiles

      Selectable

      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.

      Example image of radio-button/single-select tile

      Single-select tiles

      Example image of checkbox/multi-select tile

      Multi-select tiles

      Expandable

      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.

      Example image of expandable tile with interactive elements

      Expandable tile with interactive elements

      Example image of expandable tile without interactive elements

      Expandable tile without interactive elements

      Formatting

      Anatomy

      Tile anatomy
      1. Image (optional) : The image size follows standard Carbon aspect ratios (in this case, with a default size of 4:3)

      2. Container: Contains the content area

      3. Content area: Contains the information and/or controls needed to complete the modal’s task. It can include message text and components.

      Sizing

      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.

      Alignment

      Icon and call-to-action button

      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.

      Example of "do" on clickable tile

      Do right align the icon when it is by itself.

      Example of "do" on clickable tile

      Do right align the icon when there is additional text.

      Example of "do" on clickable tile

      Do right align the icon when there is an icon or pictogram.

      Example of "do not" on clickable tile

      Do not add interactive links or components 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.

      Example of "do" on base tile

      Do left align the interactive link at the bottom on base tile.

      Example of "do" on base tile

      Do place the button at the bottom on base tile.

      Tile groups

      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.

      Example image of how tiles are built on the wide grid.

      Example image of how tiles are built on the wide grid.

      Example image of how tiles are built on the narrow grid.

      Example image of how tiles are built on the narrow grid.

      Example image of how tiles are built on the condensed grid.

      Example image of how tiles are built on the condensed grid.

      Example of "do" of tile matching

      Do match the same type of tiles in a group

      Example of "do not" of tile mixing

      Do not mix types of tiles in a group.

      Layout

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

      • Standard layout tiles are the same in height and width as all other tiles in the group.
      • In a vertical masonry layout, tiles can vary in height, but are consistent in width.
      • In a horizontal masonry layout, tiles can vary in width; different rows of tiles may vary in height, but tiles within a row should be consistent in height.
      Layouts for tiles

      Examples of tile layouts: standard, vertical masonry, and horizontal masonry.

      Universal behaviors

      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.

      States

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

      StateWhen to use
      EnabledWhen a tile is live but a user is not directly interacting with it. This is commonly referred to as the default or normal state of the component
      HoverWhen a user is hovering over the tile with the mouse cursor to interact with it (except base tile)
      FocusWhen a user tabs to or clicks on the tile, it becomes focused, indicating the user has successfully navigated to the component (except base tile)
      SelectedWhen a user enters or clicks on the single-select tile or the multi-select tile to select an option or multiple options
      DisabledWhen the user is not allowed to interact with clickable and selectable (single-select and multi-select) tiles due to either permissions, dependencies, or pre-requisites. The disabled state completely removes the interactive function from a component. The styling is not subject to WCAG contrast compliance.
      Clickable tiles vs disabled tiles

      Clickable tile's disabled state turns the default icon into the error icon.

      Interactions

      Mouse

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

      Clickable, expandable, and selectable tiles are clickable anywhere within the tile.

      Clickable, expandable, and selectable tiles are clickable anywhere within the tile.

      Base tiles are static, except buttons or links .

      Base tiles are static, except buttons or links.

      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.

      Expandable tiles click targets

      Keyboard

      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.

      KeyInteraction
      TabMove forward through tiles (if tiles themselves are clickable) and interactive elements within the tiles in a logical order
      Shift + TabMove backward through tiles (if tiles themselves are clickable) and interactive elements within the tiles in a logical order
      Return or EnterReturn or enter will open the tile (if the tile itself is clickable). If the tile is not clickable but has interactive elements, their corresponding actions are performed.
      SpaceIf the tile is selectable, the space bar will toggle tile selection.

      Grid

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

      Aspect ratio

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

      Buttons

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

      Link

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

      Spacing

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

      References

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

      Feedback

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