Tile
Tile
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
Selectable tile
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
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
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.