Tile widget examples

To create a tile widget you need a template. On this page we want to collect a number of examples that can serve as a starting point for your tile.

Catalog view

<div class="item  col-xs-4 col-lg-4">
    <div class="thumbnail">
        <img class="group list-group-image" src="image.png" alt="">
        <div class="caption">
            <h4 class="group inner list-group-item-heading">
                Name of product</h4>
            <p class="group inner list-group-item-text">
                Description of product</p>
            <div class="row">
                <div class="col-xs-12 col-md-6">
                    <p class="lead"></p>
                </div>
                <div class="col-xs-12 col-md-6">
                    <a class="btn btn-success" href="/home">Show/Buy</a>
                </div>
            </div>
        </div>
    </div>
</div>

Row like a table

With a few small tricks you can ensure that you create a 'real' HTML table with a tile widget.

• Add the tile-as-table class to your widget.
• To add a header to your widget:

  <thead>
    <tr>
      <th>Name</th>
      <th>Status</th>
      <th>Options</th>
    </tr>
  </thead>

• Use a variant of:

<td>The name</td>
<td>The status</td>
<td>The options</td>