See what's coming soon with Carbon V10-beta.

Skip to main content
Tiles are flexible containers that house a variety of content.

Tile

Vanilla JS

<!-- 
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<div class="bx--tile"></div>

Clickable Tile

Vanilla JS

<!-- 
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<a data-tile="clickable" class="bx--tile bx--tile--clickable" tabindex="0"></a>

Selectable Tile

Vanilla JS

<!-- 
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<label for="tile-id" aria-label="tile" class="bx--tile bx--tile--selectable" data-tile="selectable" tabindex="0">
    <input tabindex="-1" data-tile-input id="tile-id" class="bx--tile-input" value="tile" type="checkbox" name="tiles" title="tile" />
  <div class="bx--tile__checkmark">
      <svg width="16" height="16" viewBox="0 0 16 16">
        <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
          fill-rule="evenodd" />
      </svg>
  </div>
  <div class="bx--tile-content">
    <!-- Tile content here -->
  </div>
</label>

Expandable Tile

Vanilla JS

<!-- 
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<div data-tile="expandable" class="bx--tile bx--tile--expandable" tabindex="0">
  <button aria-label="expand menu" class="bx--tile__chevron">
      <svg width="12" height="7" viewBox="0 0 12 7">
        <path fill-rule="nonzero" d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z" />
      </svg>
  </button>
  <div class="bx--tile-content">
    <span data-tile-atf class="bx--tile-content__above-the-fold">
      <!-- Above the fold content here -->
    </span>
    <span class="bx--tile-content__below-the-fold">
      <!-- Rest of the content here -->
    </span>
  </div>
</div>

Documentation

SCSS

Modifiers

Use these modifiers with .bx--tile class.

Selector Description
.bx--tile--clickable Adds specific styles and custom focus/hover states for a clickable tile
.bx--tile--expandable Adds specific styles and custom focus/hover states for a expandable tile
.bx--tile--selectable Adds specific styles and custom focus/hover states for a selectable tile

Javascript

Options

Option Default Selector Description
selectorInit [data-tile] The selector to find the Tile element.
selectorAboveTheFold [data-tile-atf] The selector to find the above the fold content for a expandable Tile element.
selectorTileInput [data-tile-input] The selector to find the input field in a selectable Tile element.
classExpandedTile .bx--tile--is-expanded The CSS modifier class triggered when a tile is expanded
classClickableTile .bx--tile--is-clicked The CSS modifier class triggered when a tile is clicked
classSelectableTile .bx--tile--is-selected The CSS modifier class triggered when a tile is selected

Tile types

Expandable Tiles

The expandable tile consists of two content container, one for the above the fold content and one for the below the fold content. Place the content you want to be displayed in the tile before it is expanded in the above the fold container, and the content that is to be revealed when a tile is expnaded in the below the fold container. The JavaScript attached to the expandable tile will automatically calculate the height needed to display both containers.

<div data-tile="expandable" class="bx--tile bx--tile--expandable" tabindex="0">
  <button class="bx--tile__chevron">
    <svg width="12" height="8" viewBox="0 0 12 8" fill-rule="evenodd">
      <path d="M10.6 0L6 4.7 1.4 0 0 1.4l6 6.1 6-6.1z"></path>
    </svg>
  </button>
  <div class="bx--tile-content">
    <span data-tile-atf class="bx--tile-content__above-the-fold"> <!-- Above the fold content here --> </span>
    <span class="bx--tile-content__below-the-fold"> <!-- Rest of the content here --> </span>
  </div>
</div>

Selectable Tiles

The selectable tile includes a hidden checkbox input element, and the value of the selected tile can be obtained using the same method as with any other checkbox element.

Clickable Tiles

The clickable tile is an anchor tag.