<h2class="subtitle">A <strong>single tile</strong> element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids</h2>
<divclass="content">
<p>To build intricate 2-dimensional, you only need a <strong>single element</strong>: the <code>tile</code>:</p>
</div>
{% highlight html %}
<divclass="tile">
<!-- The magical tile element! -->
</div>
{% endhighlight %}
<divclass="content">
<p>The <code>tile</code> element has <strong>16 modifiers</strong>:</p>
<ul>
<li>
<strong>3 contextual</strong> modifiers
<ul>
<li><code>is-ancestor</code></li>
<li><code>is-parent</code></li>
<li><code>is-child</code></li>
</ul>
</li>
<li>
<strong>1 directional</strong> modifier
<ul>
<li><code>is-vertical</code></li>
</ul>
</li>
<li>
<strong>12 horizontal size</strong> modifiers
<ul>
<li>from <code>is-1</code></li>
<li>to <code>is-12</code></li>
</ul>
</li>
</ul>
</div>
<hr>
<h3class="title">How it works: Nesting</h3>
<divclass="content">
<p>Everything is a tile! To create a grid of tiles, you only need to <strong>nest</strong><code>tile</code> elements.</p>
</div>
<divclass="columns">
<divclass="column is-one-third">
<p>Start with an <strong>ancestor</strong> tile that will wrap all other tiles:</p>
</div>
<divclass="column is-two-thirds">
{% highlight html %}
<divclass="tile is-ancestor">
<!-- All other tile elemnts -->
</div>
{% endhighlight %}
</div>
</div>
<divclass="columns">
<divclass="column is-one-third">
<p>Add tile elements that will distribute themselves <strong>horizontally</strong>:</p>
</div>
<divclass="column is-two-thirds">
{% highlight html %}
<divclass="tile is-ancestor">
<divclass="tile">
<!-- Add content or other tiles -->
</div>
<divclass="tile">
<!-- Add content or other tiles -->
</div>
</div>
{% endhighlight %}
</div>
</div>
<divclass="columns">
<divclass="column is-one-third">
<p>
You can <strong>resize</strong> any tile according to a <strong>12 column</strong> grid.
<br>
For example, <code>is-4</code> will take up 2/3 of the horizontal space:
</p>
</div>
<divclass="column is-two-thirds">
{% highlight html %}
<divclass="tile is-ancestor">
<divclass="tile is-4">
<!-- 1/3 -->
</div>
<divclass="tile">
<!-- This tile will take the rest: 2/3 -->
</div>
</div>
{% endhighlight %}
</div>
</div>
<divclass="columns">
<divclass="column is-one-third">
<p>If you want to stack tiles <strong>vertically</strong>, add <code>is-vertical</code> on the parent tile:</p>
</div>
<divclass="column is-two-thirds">
{% highlight html %}
<divclass="tile is-ancestor">
<divclass="tile is-4 is-vertical">
<divclass="tile">
<!-- Top tile -->
</div>
<divclass="tile">
<!-- Bottom tile -->
</div>
</div>
<divclass="tile">
<!-- This tile will take up the whole vertical space -->
</div>
</div>
{% endhighlight %}
</div>
</div>
<divclass="columns">
<divclass="column is-one-third">
<divclass="content">
<p>As soon as you want to add <strong>content</strong> to a tile, just:</p>
<ul>
<li>add <em>any</em> class you want, like <code>box</code></li>
<li>add the <code>is-child</code> modifier on the tile</li>
<li>add the <code>is-parent</code> modifier on the <em>parent</em> tile</li>
</ul>
</div>
</div>
<divclass="column is-two-thirds">
{% highlight html %}
<divclass="tile is-ancestor">
<divclass="tile is-4 is-vertical is-parent">
<divclass="tile is-child box">
<pclass="title">One</p>
</div>
<divclass="tile is-child box">
<pclass="title">Two</p>
</div>
</div>
<divclass="tile is-parent">
<divclass="tile is-child box">
<pclass="title">Three</p>
</div>
</div>
</div>
{% endhighlight %}
</div>
</div>
<divclass="tile is-ancestor">
<divclass="tile is-4 is-vertical is-parent">
<divclass="tile is-child box">
<pclass="title">One</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
<divclass="tile is-child box">
<pclass="title">Two</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</div>
<divclass="tile is-parent">
<divclass="tile is-child box">
<pclass="title">Three</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
<p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
</div>
</div>
</div>
{% highlight html %}
<divclass="tile is-ancestor">
<divclass="tile is-4 is-vertical is-parent">
<divclass="tile is-child box">
<pclass="title">One</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
<divclass="tile is-child box">
<pclass="title">Two</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</div>
<divclass="tile is-parent">
<divclass="tile is-child box">
<pclass="title">Three</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
<p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
</div>
</div>
</div>
{% endhighlight %}
<hr>
<h3class="title">Nesting requirements</h3>
<articleclass="message is-danger">
<divclass="message-header">
3 levels deep at least...
</div>
<divclass="message-body">
<divclass="content">
<p>You need at least <strong>3 levels</strong> of hierarchy:</p>
{% highlight markdown %}
tile is-ancestor
|
└───tile is-parent
|
└───tile is-child
{% endhighlight %}
</div>
</div>
</article>
<articleclass="message is-success">
<divclass="message-header">
...but more levels if you want!
</div>
<divclass="message-body">
<divclass="content">
<p>You can however nest tiles more deeply than that, and mix it up!</p>
<pclass="subtitle">Aligned with the right column</p>
<divclass="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
</div>
<divclass="tile is-parent">
<articleclass="tile is-child box">
<divclass="content">
<pclass="title">Tall column</p>
<pclass="subtitle">With even more content</p>
<divclass="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
<p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
</div>
</div>
</article>
</div>
</div>
{% highlight html %}
<divclass="tile is-ancestor">
<divclass="tile is-vertical is-8">
<divclass="tile">
<divclass="tile is-parent is-vertical">
<articleclass="tile is-child box">
<!-- Put any content you want -->
</article>
<articleclass="tile is-child box">
<!-- Put any content you want -->
</article>
</div>
<divclass="tile is-parent">
<articleclass="tile is-child box">
<!-- Put any content you want -->
</article>
</div>
</div>
<divclass="tile is-parent">
<articleclass="tile is-child box">
<!-- Put any content you want -->
</article>
</div>
</div>
<divclass="tile is-parent">
<articleclass="tile is-child box">
<!-- Put any content you want -->
</article>
</div>
</div>
{% endhighlight %}
<hr>
<h3class="title">3 columns</h3>
<divclass="tile is-ancestor">
<divclass="tile is-parent">
<articleclass="tile is-child box">
<pclass="title">Hello World</p>
<pclass="subtitle">What is up?</p>
</article>
</div>
<divclass="tile is-parent">
<articleclass="tile is-child box">
<pclass="title">Foo</p>
<pclass="subtitle">Bar</p>
</article>
</div>
<divclass="tile is-parent">
<articleclass="tile is-child box">
<pclass="title">Third column</p>
<pclass="subtitle">With some content</p>
<divclass="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
<pclass="subtitle">Aligned with the right column</p>
<divclass="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
</div>
<divclass="tile is-parent">
<articleclass="tile is-child box">
<divclass="content">
<pclass="title">Tall column</p>
<pclass="subtitle">With even more content</p>
<divclass="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
<p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
</div>
</div>
</article>
</div>
</div>
<divclass="tile is-ancestor">
<divclass="tile is-parent">
<articleclass="tile is-child box">
<pclass="title">Side column</p>
<pclass="subtitle">With some content</p>
<divclass="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
<divclass="tile is-parent is-8">
<articleclass="tile is-child box">
<pclass="title">Main column</p>
<pclass="subtitle">With some content</p>
<divclass="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
</div>
{% highlight html %}
<divclass="tile is-ancestor">
<divclass="tile is-parent">
<articleclass="tile is-child box">
<pclass="title">Hello World</p>
<pclass="subtitle">What is up?</p>
</article>
</div>
<divclass="tile is-parent">
<articleclass="tile is-child box">
<pclass="title">Foo</p>
<pclass="subtitle">Bar</p>
</article>
</div>
<divclass="tile is-parent">
<articleclass="tile is-child box">
<pclass="title">Third column</p>
<pclass="subtitle">With some content</p>
<divclass="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
<pclass="subtitle">Aligned with the right column</p>
<divclass="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
</div>
<divclass="tile is-parent">
<articleclass="tile is-child box">
<divclass="content">
<pclass="title">Tall column</p>
<pclass="subtitle">With even more content</p>
<divclass="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
<p>Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.</p>
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
</div>
</div>
</article>
</div>
</div>
<divclass="tile is-ancestor">
<divclass="tile is-parent">
<articleclass="tile is-child box">
<pclass="title">Side column</p>
<pclass="subtitle">With some content</p>
<divclass="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
<divclass="tile is-parent is-8">
<articleclass="tile is-child box">
<pclass="title">Main column</p>
<pclass="subtitle">With some content</p>
<divclass="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
</div>
{% endhighlight %}
<hr>
<h3class="title">4 columns</h3>
<divclass="tile is-ancestor">
<divclass="tile is-parent">
<articleclass="tile is-child box">
<pclass="title">One</p>
<pclass="subtitle">Subtitle</p>
</article>
</div>
<divclass="tile is-parent">
<articleclass="tile is-child box">
<pclass="title">Two</p>
<pclass="subtitle">Subtitle</p>
</article>
</div>
<divclass="tile is-parent">
<articleclass="tile is-child box">
<pclass="title">Three</p>
<pclass="subtitle">Subtitle</p>
</article>
</div>
<divclass="tile is-parent">
<articleclass="tile is-child box">
<pclass="title">Four</p>
<pclass="subtitle">Subtitle</p>
</article>
</div>
</div>
<divclass="tile is-ancestor">
<divclass="tile is-vertical is-9">
<divclass="tile">
<divclass="tile is-parent">
<articleclass="tile is-child box">
<pclass="title">Five</p>
<pclass="subtitle">Subtitle</p>
<divclass="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
</div>
</article>
</div>
<divclass="tile is-8 is-vertical">
<divclass="tile">
<divclass="tile is-parent">
<articleclass="tile is-child box">
<pclass="title">Six</p>
<pclass="subtitle">Subtitle</p>
</article>
</div>
<divclass="tile is-parent">
<articleclass="tile is-child box">
<pclass="title">Seven</p>
<pclass="subtitle">Subtitle</p>
</article>
</div>
</div>
<divclass="tile is-parent">
<articleclass="tile is-child box">
<pclass="title">Eight</p>
<pclass="subtitle">Subtitle</p>
</article>
</div>
</div>
</div>
<divclass="tile">
<divclass="tile is-8 is-parent">
<articleclass="tile is-child box">
<pclass="title">Nine</p>
<pclass="subtitle">Subtitle</p>
<divclass="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
<divclass="tile is-parent">
<articleclass="tile is-child box">
<pclass="title">Ten</p>
<pclass="subtitle">Subtitle</p>
<divclass="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
</div>
</div>
<divclass="tile is-parent">
<articleclass="tile is-child box">
<divclass="content">
<pclass="title">Eleven</p>
<pclass="subtitle">Subtitle</p>
<divclass="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
</div>
</div>
</article>
</div>
</div>
<divclass="tile is-ancestor">
<divclass="tile is-parent">
<articleclass="tile is-child box">
<pclass="title">Twelve</p>
<pclass="subtitle">Subtitle</p>
<divclass="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
</div>
</article>
</div>
<divclass="tile is-parent is-6">
<articleclass="tile is-child box">
<pclass="title">Thirteen</p>
<pclass="subtitle">Subtitle</p>
<divclass="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
<divclass="tile is-parent">
<articleclass="tile is-child box">
<pclass="title">Fourteen</p>
<pclass="subtitle">Subtitle</p>
<divclass="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
</div>
</article>
</div>
</div>
{% highlight html %}
<divclass="tile is-ancestor">
<divclass="tile is-parent">
<articleclass="tile is-child box">
<pclass="title">One</p>
<pclass="subtitle">Subtitle</p>
</article>
</div>
<divclass="tile is-parent">
<articleclass="tile is-child box">
<pclass="title">Two</p>
<pclass="subtitle">Subtitle</p>
</article>
</div>
<divclass="tile is-parent">
<articleclass="tile is-child box">
<pclass="title">Three</p>
<pclass="subtitle">Subtitle</p>
</article>
</div>
<divclass="tile is-parent">
<articleclass="tile is-child box">
<pclass="title">Four</p>
<pclass="subtitle">Subtitle</p>
</article>
</div>
</div>
<divclass="tile is-ancestor">
<divclass="tile is-vertical is-9">
<divclass="tile">
<divclass="tile is-parent">
<articleclass="tile is-child box">
<pclass="title">Five</p>
<pclass="subtitle">Subtitle</p>
<divclass="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
</div>
</article>
</div>
<divclass="tile is-8 is-vertical">
<divclass="tile">
<divclass="tile is-parent">
<articleclass="tile is-child box">
<pclass="title">Six</p>
<pclass="subtitle">Subtitle</p>
</article>
</div>
<divclass="tile is-parent">
<articleclass="tile is-child box">
<pclass="title">Seven</p>
<pclass="subtitle">Subtitle</p>
</article>
</div>
</div>
<divclass="tile is-parent">
<articleclass="tile is-child box">
<pclass="title">Eight</p>
<pclass="subtitle">Subtitle</p>
</article>
</div>
</div>
</div>
<divclass="tile">
<divclass="tile is-8 is-parent">
<articleclass="tile is-child box">
<pclass="title">Nine</p>
<pclass="subtitle">Subtitle</p>
<divclass="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
<divclass="tile is-parent">
<articleclass="tile is-child box">
<pclass="title">Ten</p>
<pclass="subtitle">Subtitle</p>
<divclass="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
</div>
</div>
<divclass="tile is-parent">
<articleclass="tile is-child box">
<divclass="content">
<pclass="title">Eleven</p>
<pclass="subtitle">Subtitle</p>
<divclass="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.</p>
<p>Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.</p>
</div>
</div>
</article>
</div>
</div>
<divclass="tile is-ancestor">
<divclass="tile is-parent">
<articleclass="tile is-child box">
<pclass="title">Twelve</p>
<pclass="subtitle">Subtitle</p>
<divclass="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
</div>
</article>
</div>
<divclass="tile is-parent is-6">
<articleclass="tile is-child box">
<pclass="title">Thirteen</p>
<pclass="subtitle">Subtitle</p>
<divclass="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p>
</div>
</article>
</div>
<divclass="tile is-parent">
<articleclass="tile is-child box">
<pclass="title">Fourteen</p>
<pclass="subtitle">Subtitle</p>
<divclass="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut.</p>
