TODO provide the tile examples

Add note about the following image formats:

.PNG = Logo

.JPG = Photos

NOTE: flexed 0.2.1 needed

Extend grid system with the thumbnail component to easily display grids of images, videos, text, and more.

Default example

By default, thumbnails are designed to showcase linked images with minimal required markup.

<div class="flex-row">
    <div class="flex-row kids-fourths-1">
        <a href="#" class="thumbnail">
        <img src="..." alt="...">
        </a>
    </div>
    ...
    </div>

Custom content

With a bit of extra markup, it’s possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.

in flexed rows

Part of the design of flexed is that it by default equalizes the row items. This is great for many things, like product grids where you have buttons, and markup that are for the image you are mainly presenting.

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Button

Thumbnail label

Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Out on the loose

While using no wraping element idenifying it as a row item it will not have the equalized heights. Using the .float-left lets them still be side by side. Where this will fail is while using the items at a set size that when the total number of items is added up, it totals more the the percent aviable and it wraps. This is not an issue while using .flex-row, it will be using just float as the heights are not the same and will catch up on each other.

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Button

Thumbnail label

Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

<div class="flex-row">

        <div class="thumbnail thirds-1 float-left">
        <img src="..." alt="...">
        <div class="caption">
            <h3>Thumbnail label</h3>
            <p>...</p>
            <p><a href="#" class="btn primary" role="button">Button</a> <a href="#" class="btn" role="button">Button</a></p>
        </div>
        </div>
    </div>