--- layout: cypress title: Grid/Tiles --- {% capture content %} <div id="tile-vertical" class="tile is-vertical is-8"> <div id="tile" class="tile"> <div id="tile-parent" class="tile is-parent is-vertical"> <article id="tile-vertical-child" class="tile is-child notification is-warning"> <p class="title">Vertical...</p> <p class="subtitle">Top tile</p> </article> <article class="tile is-child notification is-warning"> <p class="title">...tiles</p> <p class="subtitle">Bottom tile</p> </article> </div> <div class="tile is-parent"> <article id="tile-child" class="tile is-child notification is-info"> <p class="title">Middle tile</p> <p class="subtitle">With an image</p> <figure class="image is-4by3"> <img src="{{site.url}}/images/placeholders/640x480.png"> </figure> </article> </div> </div> <div class="tile is-parent"> <article class="tile is-child notification is-danger"> <p class="title">Wide tile</p> <p class="subtitle">Aligned with the right tile</p> <div class="content"> <!-- Content --> </div> </article> </div> </div> <div class="tile is-parent"> <article class="tile is-child notification is-success"> <div class="content"> <p class="title">Tall tile</p> <p class="subtitle">With even more content</p> <div class="content"> <!-- Content --> </div> </div> </article> </div> {% endcapture %} <div id="tile-ancestor" class="tile is-ancestor"> {{ content }} </div> <div> <div id="tile-ancestor-last" class="tile is-ancestor"> {{ content }} </div> </div> <div class="tile is-ancestor" style="width: 1000px;"> {% for i in (1..12) %} <div id="tile-{{ i }}" class="tile is-{{ i }}"> Tile {{ i }} </div> {% endfor %} </div>