Sandbox Jekyll documentation
Tiles
Learn how to use tiles in Sandbox.
Tiles 1
<div class="row gx-md-5 gy-5 align-items-center">
<div class="col-md-6">
<div class="row gx-md-5 gy-5">
<div class="col-md-10 offset-md-2">
<figure class="rounded"><img src="./assets/img/photos/ab1.webp" srcset="./assets/img/photos/[email protected] 2x" alt=""></figure>
</div>
<!--/column -->
<div class="col-md-12">
<figure class="rounded"><img src="./assets/img/photos/ab2.webp" srcset="./assets/img/photos/[email protected] 2x" alt=""></figure>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="col-md-6">
<figure class="rounded"><img src="./assets/img/photos/ab3.webp" srcset="./assets/img/photos/[email protected] 2x" alt=""></figure>
</div>
<!--/column -->
</div>
<!--/.row -->Tiles 2
<div class="row gx-md-5 gy-5">
<div class="col-md-4 offset-md-1 align-self-end">
<figure class="rounded"><img src="./assets/img/photos/g1.webp" srcset="./assets/img/photos/[email protected] 2x" alt=""></figure>
</div>
<!--/column -->
<div class="col-md-6 align-self-end">
<figure class="rounded"><img src="./assets/img/photos/g2.webp" srcset="./assets/img/photos/[email protected] 2x" alt=""></figure>
</div>
<!--/column -->
<div class="col-md-6">
<figure class="rounded"><img src="./assets/img/photos/g3.webp" srcset="./assets/img/photos/[email protected] 2x" alt=""></figure>
</div>
<!--/column -->
<div class="col-md-4 align-self-start">
<figure class="rounded"><img src="./assets/img/photos/g4.webp" srcset="./assets/img/photos/[email protected] 2x" alt=""></figure>
</div>
<!--/column -->
</div>
<!--/.row -->Tiles 3
<div class="row gx-md-5 gy-5 align-items-center">
<div class="col-6">
<img class="img-fluid rounded shadow-lg d-flex ms-auto" src="./assets/img/photos/sa13.webp" srcset="./assets/img/photos/[email protected] 2x" alt="" />
</div>
<!-- /column -->
<div class="col-6">
<img class="img-fluid rounded shadow-lg mb-5" src="./assets/img/photos/sa14.webp" srcset="./assets/img/photos/[email protected] 2x" alt="" />
<img class="img-fluid rounded shadow-lg d-flex col-10" src="./assets/img/photos/sa15.webp" srcset="./assets/img/photos/[email protected] 2x" alt="" />
</div>
<!-- /column -->
</div>
<!-- /.row -->Tiles 4
<div class="row gx-md-5 gy-5">
<div class="col-5">
<img class="img-fluid rounded shadow-lg my-5 d-flex ms-auto" src="./assets/img/photos/sa9.webp" srcset="./assets/img/photos/[email protected] 2x" alt="" />
<img class="img-fluid rounded shadow-lg d-flex col-10 ms-auto" src="./assets/img/photos/sa10.webp" srcset="./assets/img/photos/[email protected] 2x" alt="" />
</div>
<!-- /column -->
<div class="col-7">
<img class="img-fluid rounded shadow-lg mb-5" src="./assets/img/photos/sa11.webp" srcset="./assets/img/photos/[email protected] 2x" alt="" />
<img class="img-fluid rounded shadow-lg d-flex col-11" src="./assets/img/photos/sa12.webp" srcset="./assets/img/photos/[email protected] 2x" alt="" />
</div>
<!-- /column -->
</div>
<!-- /.row -->Tiles 5
<div class="row gx-md-5 gy-5">
<div class="col-6">
<img class="img-fluid rounded shadow-lg mb-5" src="./assets/img/photos/sa5.webp" srcset="./assets/img/photos/[email protected] 2x" alt="" />
<img class="img-fluid rounded shadow-lg d-flex col-10 ms-auto" src="./assets/img/photos/sa6.webp" srcset="./assets/img/photos/[email protected] 2x" alt="" />
</div>
<!-- /column -->
<div class="col-6">
<img class="img-fluid rounded shadow-lg my-5" src="./assets/img/photos/sa7.webp" srcset="./assets/img/photos/[email protected] 2x" alt="" />
<img class="img-fluid rounded shadow-lg d-flex col-10" src="./assets/img/photos/sa8.webp" srcset="./assets/img/photos/[email protected] 2x" alt="" />
</div>
<!-- /column -->
</div>
<!-- /.row -->Tiles 6
<div class="row gx-md-5 gy-5">
<div class="col-md-6">
<figure class="rounded mt-md-10 position-relative"><img src="./assets/img/photos/g5.webp" srcset="./assets/img/photos/[email protected] 2x" alt=""></figure>
</div>
<!--/column -->
<div class="col-md-6">
<div class="row gx-md-5 gy-5">
<div class="col-md-12 order-md-2">
<figure class="rounded"><img src="./assets/img/photos/g6.webp" srcset="./assets/img/photos/[email protected] 2x" alt=""></figure>
</div>
<!--/column -->
<div class="col-md-10">
<figure class="rounded"><img src="./assets/img/photos/g7.webp" srcset="./assets/img/photos/[email protected] 2x" alt=""></figure>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
</div>
<!--/.row -->Tiles 7
<div class="row g-4">
<div class="col-4 d-flex flex-column ms-auto">
<div class="ms-auto mt-6"><img class="img-fluid rounded shadow-lg" src="./assets/img/demos/vc1.webp" srcset="./assets/img/demos/[email protected] 2x" alt="" /></div>
<div class="ms-auto mt-4"><img class="img-fluid rounded shadow-lg" src="./assets/img/demos/vc2.webp" srcset="./assets/img/demos/[email protected] 2x" alt="" /></div>
<div class="ms-auto mt-4"><img class="img-fluid rounded shadow-lg" src="./assets/img/demos/vc3.webp" srcset="./assets/img/demos/[email protected] 2x" alt="" /></div>
</div>
<!-- /column -->
<div class="col-4">
<div><img class="w-100 img-fluid rounded shadow-lg" src="./assets/img/demos/vc4.webp" srcset="./assets/img/demos/[email protected] 2x" alt="" /></div>
<div><img class="w-100 img-fluid rounded shadow-lg mt-4" src="./assets/img/demos/vc5.webp" srcset="./assets/img/demos/[email protected] 2x" alt="" /></div>
<div><img class="w-100 img-fluid rounded shadow-lg mt-4" src="./assets/img/demos/vc6.webp" srcset="./assets/img/demos/[email protected] 2x" alt="" /></div>
</div>
<!-- /column -->
<div class="col-4 d-flex flex-column">
<div class="mt-8"><img class="img-fluid rounded shadow-lg" src="./assets/img/demos/vc7.webp" srcset="./assets/img/demos/[email protected] 2x" alt="" /></div>
<div class="mt-4 mb-10"><img class="img-fluid rounded shadow-lg" src="./assets/img/demos/vc8.webp" srcset="./assets/img/demos/[email protected] 2x" alt="" /></div>
</div>
<!-- /column -->
</div>
<!-- /.row -->Tiles 8
<div class="overlap-grid overlap-grid-2">
<div class="item">
<figure class="rounded shadow"><img src="./assets/img/photos/about2.webp" srcset="./assets/img/photos/[email protected] 2x" alt=""></figure>
</div>
<!--/.item -->
<div class="item">
<figure class="rounded shadow"><img src="./assets/img/photos/about3.webp" srcset="./assets/img/photos/[email protected] 2x" alt=""></figure>
</div>
<!--/.item -->
</div>
<!--/.overlap-grid -->Tiles 9
<div class="row gx-md-5 gy-5">
<div class="col-12">
<figure class="rounded mx-md-5"><img src="/assets/img/photos/g8.webp" srcset="/assets/img/photos/[email protected] 2x" alt=""></figure>
</div>
<!--/column -->
<div class="col-md-6">
<figure class="rounded"><img src="/assets/img/photos/g9.webp" srcset="/assets/img/photos/[email protected] 2x" alt=""></figure>
</div>
<!--/column -->
<div class="col-md-6">
<figure class="rounded"><img src="/assets/img/photos/g10.webp" srcset="/assets/img/photos/[email protected] 2x" alt=""></figure>
</div>
<!--/column -->
</div>
<!--/.row -->Tiles 10
<div class="row gx-md-5 gy-5">
<div class="col-md-6">
<figure class="rounded"><img src="/assets/img/photos/g12.webp" srcset="/assets/img/photos/[email protected] 2x" alt=""></figure>
</div>
<!--/column -->
<div class="col-md-6 align-self-end">
<figure class="rounded"><img src="/assets/img/photos/g13.webp" srcset="/assets/img/photos/[email protected] 2x" alt=""></figure>
</div>
<!--/column -->
<div class="col-12">
<figure class="rounded mx-md-5"><img src="/assets/img/photos/g11.webp" srcset="/assets/img/photos/[email protected] 2x" alt=""></figure>
</div>
<!--/column -->
</div>
<!--/.row -->