Tiles

Basis element for wrapping page content. Tiles make use of flexbox and provide a more efficient way to align items.

This is the tile content 
<div class="tile-container">
  <div class="tile">
    <div class="columns">
      <div class="column">
        This is the tile content
      </div>
    </div>
  </div>
</div>

Using headers and footers

This is a tile heading

This is some tile content
This is some tile content
This is the tile footer 
<div class="tile-container">
  <div class="tile">
    <div class="tile-header">
      <h2 class="tile-heading">This is a tile heading</h2>
    </div>
    <div class="columns">
      <div class="column">
        This is some tile content
      </div>
      <div class="column">
        This is some tile content
      </div>
    </div>
    <div class="tile-footer">
      This is the tile footer
    </div>
  </div>
</div>

Headers and footers with a distinct separation line.

Add .tile-header-border or .tile-footer-border to separate the header or footer with a border.

By default .column will fill the remaining width. Using multiple .column elements in a single .columns element will divide them equally.

This is a tile heading

This is some tile content
This is some tile content
This is the tile footer 
<div class="tile-container">
  <div class="tile">
    <div class="tile-header tile-header-border">
      <h2 class="tile-heading">This is a tile heading</h2>
    </div>
    <div class="columns">
      <div class="column">
        This is some tile content
      </div>
      <div class="column">
        This is some tile content
      </div>
    </div>
    <div class="tile-footer tile-footer-border">
      This is the tile footer
    </div>
  </div>
</div>

Using images

Images will scale up to 100% width of the tile element.

This is an image
This is an image 
<div class="tile-container">
  <div class="columns">
    <div class="col-md-6">
      <div class="tile">
        <div class="tile-image">
          <img src="https://loremflickr.com/640/360?lock=1">
        </div>
        <div class="columns">
          <div class="column">
            This is an image
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="tile">
        <div class="tile-image">
          <img src="https://loremflickr.com/640/360?lock=2">
        </div>
        <div class="columns">
          <div class="column">
            This is an image
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Using the bootstrap grid

You can align tiles using the bootstrap grid.

This is an image

This is a tile heading

This is some tile content
This is the tile footer
This is an image 
<div class="tile-container">
  <div class="row">
    <div class="col-md-4">
      <div class="tile">
        <div class="tile-image">
          <img src="https://loremflickr.com/640/360?lock=3">
        </div>
        <div class="columns">
          <div class="column">
            This is an image
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="tile">
        <div class="tile-header tile-header-border">
          <h2 class="tile-heading">This is a tile heading</h2>
        </div>
        <div class="columns">
          <div class="column">
            This is some tile content
          </div>
        </div>
        <div class="tile-footer tile-footer-border">
          This is the tile footer
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="tile">
        <div class="tile-image">
          <img src="https://loremflickr.com/640/360?lock=5">
        </div>
        <div class="columns">
          <div class="column">
            This is an image
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Using tables

Use tables inside a tile element.

This is a tile heading

This is a tile subheading

This is a table header cell
This is a table cell 
<div class="tile-container">
  <div class="tile">
    <div class="tile-header tile-header-border">
      <h2 class="tile-heading">This is a tile heading</h2>
      <h2 class="tile-subheading">This is a tile subheading</h2>
    </div>
    <table class="table">
      <thead>
        <tr>
          <th>This is a table header cell</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>This is a table cell</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Wrapping

Please note:

The flex-wrap CSS property, which is being used by the examples below, is not (yet) supported in IE11.

Use .columns-wrap to force wrapping on the selected .columns. Control how many items should be on one columns with .wrap-*, where * is number of items per columns. The available numbers to combine with the .wrap-* class are: 1, 2, 3, 4, 5, 6 and 8.

Equal height

Use .columns-eq-height on a .columns element to force children to have equal height.

This is a tile heading

Dapibus id blandit fames ad nunc lobortis dis proin a cras consequat sem magnis magna torquent a dui dolor adipiscing lacus odio erat magna eu adipiscing morbi.
Adipiscing cum nisl a parturient ultrices senectus condimentum iaculis penatibus suspendisse tincidunt primis a bibendum ultrices magna enim sociosqu quam parturient arcu quisque vestibulum vestibulum dignissim interdum mus.
Proin dignissim metus tristique, lacinia lectus a, malesuada tortor.
A columns without .columns-eq-height.
Proin et porttitor ante.
Morbi condimentum, ligula volutpat sagittis vulputate.
Nam congue, orci quis semper molestie, ligula sem euismod lacus.
Sit amet lacinia lectus mauris non sapien.
Quisque finibus elementum vestibulum. Vivamus fringilla faucibus sollicitudin.

This is a separator

The same columns with .columns-eq-height.
Proin et porttitor ante.
Morbi condimentum, ligula volutpat sagittis vulputate.
Nam congue, orci quis semper molestie, ligula sem euismod lacus.
Sit amet lacinia lectus mauris non sapien.
Quisque finibus elementum vestibulum. Vivamus fringilla faucibus sollicitudin. 
<div class="tile-container">
  <div class="tile">
    <div class="tile-header">
      <h2 class="tile-heading">This is a tile heading</h2>
    </div>
    <div class="columns columns-eq-height columns-wrap wrap-3">
      <div class="column">
        <div class="well m-0">
          Dapibus id blandit fames ad nunc lobortis dis proin a cras consequat sem magnis magna torquent a dui dolor adipiscing lacus odio erat magna eu adipiscing morbi.
        </div>
      </div>
      <div class="column">
        <div class="well m-0">
          Adipiscing cum nisl a parturient ultrices senectus condimentum iaculis penatibus suspendisse tincidunt primis a bibendum ultrices magna enim sociosqu quam parturient arcu quisque vestibulum vestibulum dignissim interdum mus.
        </div>
      </div>
      <div class="column">
        <div class="well m-0">
          Proin dignissim metus tristique, lacinia lectus a, malesuada tortor.
        </div>
      </div>
    </div>
    <div class="columns">
      <div class="column">
        A columns without <code>.columns-eq-height</code>.
      </div>
    </div>
    <div class="columns columns-wrap wrap-5">
      <div class="column">
        <div class="well m-0">
          Proin et porttitor ante.
        </div>
      </div>
      <div class="column">
        <div class="well m-0">
          Morbi condimentum, ligula volutpat sagittis vulputate.
        </div>
      </div>
      <div class="column">
        <div class="well m-0">
          Nam congue, orci quis semper molestie, ligula sem euismod lacus.
        </div>
      </div>
      <div class="column">
        <div class="well m-0">
          Sit amet lacinia lectus mauris non sapien.
        </div>
      </div>
      <div class="column">
        <div class="well m-0">
          Quisque finibus elementum vestibulum. Vivamus fringilla faucibus sollicitudin.
        </div>
      </div>
    </div>
    <div class="tile-separator tile-separator-border">
      <h2 class="tile-heading">This is a separator</h2>
    </div>
    <div class="columns">
      <div class="column">
        The same columns with <code>.columns-eq-height</code>.
      </div>
    </div>
    <div class="columns columns-eq-height">
      <div class="column">
        <div class="well m-0">
          Proin et porttitor ante.
        </div>
      </div>
      <div class="column">
        <div class="well m-0">
          Morbi condimentum, ligula volutpat sagittis vulputate.
        </div>
      </div>
      <div class="column">
        <div class="well m-0">
          Nam congue, orci quis semper molestie, ligula sem euismod lacus.
        </div>
      </div>
      <div class="column">
        <div class="well m-0">
          Sit amet lacinia lectus mauris non sapien.
        </div>
      </div>
      <div class="column">
        <div class="well m-0">
          Quisque finibus elementum vestibulum. Vivamus fringilla faucibus sollicitudin.
        </div>
      </div>
    </div>
  </div>
</div>

Grid for tiles

Percentage based grid system, available width classes: .column-20, .column-25, .column-33, .column-40, .column-50, .column-60, .column-66, .column-75, .column-80.

20%
60%
20%
33%
66%
50%
25% 
<div class="tile-container">
  <div class="tile">
    <div class="columns">
      <div class="column column-20">
        <div class="well m-0">
          20%
        </div>
      </div>
      <div class="column column-60">
        <div class="well m-0">
          60%
        </div>
      </div>
      <div class="column column-20">
        <div class="well m-0">
          20%
        </div>
      </div>
    </div>
    <div class="columns">
      <div class="column column-33">
        <div class="well m-0">
          33%
        </div>
      </div>
      <div class="column column-66">
        <div class="well m-0">
          66%
        </div>
      </div>
    </div>
    <div class="columns">
      <div class="column column-50">
        <div class="well m-0">
          50%
        </div>
      </div>
      <div class="column column-25">
        <div class="well m-0">
          25%
        </div>
      </div>
    </div>
  </div>
</div>