Skip to main contentCarbon Design System

Tile

Tile

Vanilla JS
React Angular Vue CodePen
Code:
<!-- 
  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
React Angular Vue CodePen
Code:
<!-- 
  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
React Vue CodePen
Code:
<!-- 
  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.
-->

<input tabindex="-1" data-tile-input id="tile-id" class="bx--tile-input" value="tile" type="checkbox" name="tiles" title="tile" />
<label for="tile-id" aria-label="tile" class="bx--tile bx--tile--selectable" data-tile="selectable" tabindex="0">
  <div class="bx--tile__checkmark">
    <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8,1C4.1,1,1,4.1,1,8c0,3.9,3.1,7,7,7s7-3.1,7-7C15,4.1,11.9,1,8,1z M7,11L4.3,8.3l0.9-0.8L7,9.3l4-3.9l0.9,0.8L7,11z"></path><path d="M7,11L4.3,8.3l0.9-0.8L7,9.3l4-3.9l0.9,0.8L7,11z" data-icon-path="inner-path" opacity="0"></path></svg>
  </div>
  <div class="bx--tile-content">
    <!-- Tile content here -->
  </div>
</label>

Expandable tile

Vanilla JS
React Vue CodePen
Code:
<!-- 
  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 focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"></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>

Grid tile

Above the fold content here

Below the fold content here
Vanilla JS
Code:
<!-- 
  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--grid">

  <div class="bx--tile-container" style="width: 100%">
    <div class="bx--row">
      <div class="bx--col bx--col-md-12">
        <div data-tile="expandable" class="bx--tile bx--tile--expandable" tabindex="0">
          <button 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" style="height: 200px">
              <!-- Above the fold content here -->
              <h2>Above the fold content here</h2>
            </span>
            <span class="bx--tile-content__below-the-fold" style="height: 400px">
              <!-- Rest of the content here -->
              <h2>Below the fold content here</h2>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="bx--row">
      <div class="bx--col bx--col-sm-2">
        <label for="tile-id-1" aria-label="tile" class="bx--tile bx--tile--selectable" data-tile="selectable" tabindex="0">
          <input tabindex="-1" id="tile-id-1" class="bx--tile-input" data-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>
      </div>
      <div class="bx--col bx--col-sm-2">
        <label for="tile-id-2" aria-label="tile-2" class="bx--tile bx--tile--selectable" data-tile="selectable" tabindex="0">
          <input tabindex="-1" id="tile-id-2" class="bx--tile-input" data-tile-input value="tile-2" type="checkbox" name="tiles" title="tile-2"
          />
          <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>
      </div>
    </div>
    <div class="bx--row">
      <div class="bx--col bx--col-md-4 bx--col-sm-4">
        <a data-tile="clickable" class="bx--tile bx--tile--clickable" tabindex="0"></a>
      </div>
      <div class="bx--col bx--col-md-4 bx--col-sm-4">
        <a data-tile="clickable" class="bx--tile bx--tile--clickable" tabindex="0"></a>
      </div>
      <div class="bx--col bx--col-md-8 bx--col-sm-4">
        <a data-tile="clickable" class="bx--tile bx--tile--clickable" tabindex="0"></a>
      </div>
    </div>
    <div class="bx--row">
      <div class="bx--col bx--col-md-4 bx--col-sm-4">
        <div class="bx--tile"></div>
      </div>
      <div class="bx--col bx--col-md-4 bx--col-sm-4">
        <div class="bx--tile"></div>
      </div>
      <div class="bx--col bx--col-md-4 bx--col-sm-4">
        <div class="bx--tile"></div>
      </div>
      <div class="bx--col bx--col-md-4 bx--col-sm-4">
        <div class="bx--tile"></div>
      </div>
    </div>
    <div class="bx--row">
      <div class="bx--col bx--col-lg-4 bx--col-md-8">
        <div class="bx--tile"></div>
      </div>
      <div class="bx--col bx--col-lg-4 bx--col-md-8">
        <div class="bx--tile"></div>
      </div>
      <div class="bx--col bx--col-lg-4 bx--col-md-8">
        <div class="bx--tile"></div>
      </div>
      <div class="bx--col bx--col-lg-4 bx--col-md-8">
        <div class="bx--tile"></div>
      </div>
    </div>
    <div class="bx--row">
      <div class="bx--col bx--col-lg-16">
        <div class="bx--tile"></div>
      </div>
    </div>
    <div class="bx--row">
      <div class="bx--col bx--col-md-5 bx--col-sm-2">
        <div class="bx--tile"></div>
      </div>
      <div class="bx--col bx--col-md-3 bx--col-sm-2">
        <div class="bx--tile"></div>
      </div>
    </div>
  </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.

Edit this page on GitHub
Previous
Components: Text input
Next
Tile: Usage