Experimental Tile
<!--
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>
Experimental Clickable Tile
Experimental Selectable Tile
<!--
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>
Experimental Expandable Tile
<!--
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.