Tiles

<div class="tile is-ancestor">
    <div class="tile is-vertical is-8">
        <div class="tile">
            <div class="tile is-parent is-vertical">
                <article class="tile is-child box has-background-light">
                    <p class="title">Vertical...</p>
                    <p class="subtitle">Top tile</p>
                </article>
                <article class="tile is-child box has-background-light">
                    <p class="title">...tiles</p>
                    <p class="subtitle">Bottom tile</p>
                </article>
            </div>
            <div class="tile is-parent">
                <article class="tile is-child box has-background-light">
                    <p class="title">Middle tile</p>
                    <p class="subtitle">With an image</p>
                    <figure class="image is-16by9">
                        <img src="/design-system/assets/img/syrian-refugees.jpg" alt="Example">
                    </figure>
                </article>
            </div>
        </div>
        <div class="tile is-parent">
            <article class="tile is-child box has-background-light">
                <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 box has-background-light">
            <div class="content">
                <p class="title">Tall tile</p>
                <p class="subtitle">With even more content</p>
                <div class="content"> 
                <!-- content -->
            </div>
        </article>
    </div>
</div>