Thumbnail Grid
These modular elements can be readily used and customized in every layout across pages.
Example
GILLIAN WEARING
Since the beginning of her career, Gillian Wearing has drawn from techniques of theatre, reality television, and fly-on-the-wall documentary-making to construct narratives that explore personal fantasies and confessions, individual traumas, cultural histories.
Visit Website
CATHERINE OPIE
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
Visit Website
CHRISTOPHER WOOL
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
Visit Website
CHRISTOPHER WOOL
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
Visit Website
CHRISTOPHER WOOL
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
Visit Website
CHRISTOPHER WOOL
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
Visit Website
CHRISTOPHER WOOL
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.,Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis eaque quisquam perferendis doloremque optio, eligendi deserunt molestiae tenetur dolore rerum aperiam facere rem aspernatur accusamus ratione ut sapiente ipsam voluptate.
Visit Website
CHRISTOPHER WOOL
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
Visit Website
CHRISTOPHER WOOL
Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
Visit Website<div class="row g-2 position-relative thumbnail-grid-container" id="selector">
<div class="col-12 col-sm-6 col-lg-4 thumbnail-grid-item"><img class="w-100 rounded" src="../assets/img/gallery/g1.jpg" alt="" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne" />
<div class="position-absolute start-0">
<div class="collapse thumbnail-grid-content position-relative" data-bs-parent="#selector" id="collapseOne">
<div class="pt-3 pb-2">
<div class="card card-body border-0 bg-100 px-4">
<div class="row align-items-center">
<div class="thumbnail-grid-navigation"><a class="thumbnail-close" href="#!"><i class="fas fa-times"></i></a><a class="thumbnail-grid-nav prev" href="#!" data-grid-target="#!" data-thumbnail-grid-nav="data-thumbnail-grid-nav"><i class="fas fa-angle-left"></i></a><a class="thumbnail-grid-nav next" href="#!" data-grid-target="#collapseTwo" data-thumbnail-grid-nav="data-thumbnail-grid-nav"><i class="fas fa-angle-right"></i></a></div>
<div class="col-7">
<div class="d-none d-lg-block p-0"><img class="w-100 img-fluid rounded" src="../assets/img/gallery/g1.jpg" alt="" /></div>
</div>
<div class="col-lg-5">
<h5 class="ls-1">GILLIAN WEARING</h5>
<p>Since the beginning of her career, Gillian Wearing has drawn from techniques of theatre, reality television, and fly-on-the-wall documentary-making to construct narratives that explore personal fantasies and confessions, individual traumas, cultural histories.</p><a class="btn btn-outline-dark btn-sm hvr-sweep-top hover-color-white mt-2" href="#!">Visit Website</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-4 thumbnail-grid-item"><img class="w-100 rounded" src="../assets/img/gallery/g2.jpg" alt="" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" />
<div class="position-absolute start-0">
<div class="collapse thumbnail-grid-content position-relative" data-bs-parent="#selector" id="collapseTwo">
<div class="pt-3 pb-2">
<div class="card card-body border-0 bg-100 px-4">
<div class="row align-items-center">
<div class="thumbnail-grid-navigation"><a class="thumbnail-close" href="#!"><i class="fas fa-times"></i></a><a class="thumbnail-grid-nav prev" href="#!" data-grid-target="#collapseOne" data-thumbnail-grid-nav="data-thumbnail-grid-nav"><i class="fas fa-angle-left"></i></a><a class="thumbnail-grid-nav next" href="#!" data-grid-target="#collapseThree" data-thumbnail-grid-nav="data-thumbnail-grid-nav"><i class="fas fa-angle-right"></i></a></div>
<div class="col-7">
<div class="d-none d-lg-block p-0"><img class="w-100 img-fluid rounded" src="../assets/img/gallery/g2.jpg" alt="" /></div>
</div>
<div class="col-lg-5">
<h5 class="ls-1">CATHERINE OPIE</h5>
<p>Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.</p><a class="btn btn-outline-dark btn-sm hvr-sweep-top hover-color-white mt-2" href="#!">Visit Website</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-4 thumbnail-grid-item"><img class="w-100 rounded" src="../assets/img/gallery/g3.jpg" alt="" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" />
<div class="position-absolute start-0">
<div class="collapse thumbnail-grid-content position-relative" data-bs-parent="#selector" id="collapseThree">
<div class="pt-3 pb-2">
<div class="card card-body border-0 bg-100 px-4">
<div class="row align-items-center">
<div class="thumbnail-grid-navigation"><a class="thumbnail-close" href="#!"><i class="fas fa-times"></i></a><a class="thumbnail-grid-nav prev" href="#!" data-grid-target="#collapseTwo" data-thumbnail-grid-nav="data-thumbnail-grid-nav"><i class="fas fa-angle-left"></i></a><a class="thumbnail-grid-nav next" href="#!" data-grid-target="#collapseFour" data-thumbnail-grid-nav="data-thumbnail-grid-nav"><i class="fas fa-angle-right"></i></a></div>
<div class="col-7">
<div class="d-none d-lg-block p-0"><img class="w-100 img-fluid rounded" src="../assets/img/gallery/g3.jpg" alt="" /></div>
</div>
<div class="col-lg-5">
<h5 class="ls-1">CHRISTOPHER WOOL</h5>
<p>Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.</p><a class="btn btn-outline-dark btn-sm hvr-sweep-top hover-color-white mt-2" href="#!">Visit Website</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-4 thumbnail-grid-item"><img class="w-100 rounded" src="../assets/img/gallery/g4.jpg" alt="" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour" />
<div class="position-absolute start-0">
<div class="collapse thumbnail-grid-content position-relative" data-bs-parent="#selector" id="collapseFour">
<div class="pt-3 pb-2">
<div class="card card-body border-0 bg-100 px-4">
<div class="row align-items-center">
<div class="thumbnail-grid-navigation"><a class="thumbnail-close" href="#!"><i class="fas fa-times"></i></a><a class="thumbnail-grid-nav prev" href="#!" data-grid-target="#collapseThree" data-thumbnail-grid-nav="data-thumbnail-grid-nav"><i class="fas fa-angle-left"></i></a><a class="thumbnail-grid-nav next" href="#!" data-grid-target="#collapseFive" data-thumbnail-grid-nav="data-thumbnail-grid-nav"><i class="fas fa-angle-right"></i></a></div>
<div class="col-7">
<div class="d-none d-lg-block p-0"><img class="w-100 img-fluid rounded" src="../assets/img/gallery/g4.jpg" alt="" /></div>
</div>
<div class="col-lg-5">
<h5 class="ls-1">CHRISTOPHER WOOL</h5>
<p>Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.</p><a class="btn btn-outline-dark btn-sm hvr-sweep-top hover-color-white mt-2" href="#!">Visit Website</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-4 thumbnail-grid-item"><img class="w-100 rounded" src="../assets/img/gallery/g5.jpg" alt="" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive" />
<div class="position-absolute start-0">
<div class="collapse thumbnail-grid-content position-relative" data-bs-parent="#selector" id="collapseFive">
<div class="pt-3 pb-2">
<div class="card card-body border-0 bg-100 px-4">
<div class="row align-items-center">
<div class="thumbnail-grid-navigation"><a class="thumbnail-close" href="#!"><i class="fas fa-times"></i></a><a class="thumbnail-grid-nav prev" href="#!" data-grid-target="#collapseFour" data-thumbnail-grid-nav="data-thumbnail-grid-nav"><i class="fas fa-angle-left"></i></a><a class="thumbnail-grid-nav next" href="#!" data-grid-target="#collapseSix" data-thumbnail-grid-nav="data-thumbnail-grid-nav"><i class="fas fa-angle-right"></i></a></div>
<div class="col-7">
<div class="d-none d-lg-block p-0"><img class="w-100 img-fluid rounded" src="../assets/img/gallery/g5.jpg" alt="" /></div>
</div>
<div class="col-lg-5">
<h5 class="ls-1">CHRISTOPHER WOOL</h5>
<p>Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.</p><a class="btn btn-outline-dark btn-sm hvr-sweep-top hover-color-white mt-2" href="#!">Visit Website</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-4 thumbnail-grid-item"><img class="w-100 rounded" src="../assets/img/gallery/g6.jpg" alt="" data-bs-toggle="collapse" data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix" />
<div class="position-absolute start-0">
<div class="collapse thumbnail-grid-content position-relative" data-bs-parent="#selector" id="collapseSix">
<div class="pt-3 pb-2">
<div class="card card-body border-0 bg-100 px-4">
<div class="row align-items-center">
<div class="thumbnail-grid-navigation"><a class="thumbnail-close" href="#!"><i class="fas fa-times"></i></a><a class="thumbnail-grid-nav prev" href="#!" data-grid-target="#collapseFive" data-thumbnail-grid-nav="data-thumbnail-grid-nav"><i class="fas fa-angle-left"></i></a><a class="thumbnail-grid-nav next" href="#!" data-grid-target="#collapseSeven" data-thumbnail-grid-nav="data-thumbnail-grid-nav"><i class="fas fa-angle-right"></i></a></div>
<div class="col-7">
<div class="d-none d-lg-block p-0"><img class="w-100 img-fluid rounded" src="../assets/img/gallery/g6.jpg" alt="" /></div>
</div>
<div class="col-lg-5">
<h5 class="ls-1">CHRISTOPHER WOOL</h5>
<p>Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.</p><a class="btn btn-outline-dark btn-sm hvr-sweep-top hover-color-white mt-2" href="#!">Visit Website</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-4 thumbnail-grid-item"><img class="w-100 rounded" src="../assets/img/gallery/g7.jpg" alt="" data-bs-toggle="collapse" data-bs-target="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven" />
<div class="position-absolute start-0">
<div class="collapse thumbnail-grid-content position-relative" data-bs-parent="#selector" id="collapseSeven">
<div class="pt-3 pb-2">
<div class="card card-body border-0 bg-100 px-4">
<div class="row align-items-center">
<div class="thumbnail-grid-navigation"><a class="thumbnail-close" href="#!"><i class="fas fa-times"></i></a><a class="thumbnail-grid-nav prev" href="#!" data-grid-target="#collapseSix" data-thumbnail-grid-nav="data-thumbnail-grid-nav"><i class="fas fa-angle-left"></i></a><a class="thumbnail-grid-nav next" href="#!" data-grid-target="#collapseEight" data-thumbnail-grid-nav="data-thumbnail-grid-nav"><i class="fas fa-angle-right"></i></a></div>
<div class="col-7">
<div class="d-none d-lg-block p-0"><img class="w-100 img-fluid rounded" src="../assets/img/gallery/g7.jpg" alt="" /></div>
</div>
<div class="col-lg-5">
<h5 class="ls-1">CHRISTOPHER WOOL</h5>
<p>Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.,Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis eaque quisquam perferendis doloremque optio, eligendi deserunt molestiae tenetur dolore rerum aperiam facere rem aspernatur accusamus ratione ut sapiente ipsam voluptate.</p><a class="btn btn-outline-dark btn-sm hvr-sweep-top hover-color-white mt-2" href="#!">Visit Website</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-4 thumbnail-grid-item"><img class="w-100 rounded" src="../assets/img/gallery/g8.jpg" alt="" data-bs-toggle="collapse" data-bs-target="#collapseEight" aria-expanded="false" aria-controls="collapseEight" />
<div class="position-absolute start-0">
<div class="collapse thumbnail-grid-content position-relative" data-bs-parent="#selector" id="collapseEight">
<div class="pt-3 pb-2">
<div class="card card-body border-0 bg-100 px-4">
<div class="row align-items-center">
<div class="thumbnail-grid-navigation"><a class="thumbnail-close" href="#!"><i class="fas fa-times"></i></a><a class="thumbnail-grid-nav prev" href="#!" data-grid-target="#collapseSeven" data-thumbnail-grid-nav="data-thumbnail-grid-nav"><i class="fas fa-angle-left"></i></a><a class="thumbnail-grid-nav next" href="#!" data-grid-target="#collapseNine" data-thumbnail-grid-nav="data-thumbnail-grid-nav"><i class="fas fa-angle-right"></i></a></div>
<div class="col-7">
<div class="d-none d-lg-block p-0"><img class="w-100 img-fluid rounded" src="../assets/img/gallery/g8.jpg" alt="" /></div>
</div>
<div class="col-lg-5">
<h5 class="ls-1">CHRISTOPHER WOOL</h5>
<p>Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.</p><a class="btn btn-outline-dark btn-sm hvr-sweep-top hover-color-white mt-2" href="#!">Visit Website</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-4 thumbnail-grid-item"><img class="w-100 rounded" src="../assets/img/gallery/g9.jpg" alt="" data-bs-toggle="collapse" data-bs-target="#collapseNine" aria-expanded="false" aria-controls="collapseNine" />
<div class="position-absolute start-0">
<div class="collapse thumbnail-grid-content position-relative" data-bs-parent="#selector" id="collapseNine">
<div class="pt-3 pb-2">
<div class="card card-body border-0 bg-100 px-4">
<div class="row align-items-center">
<div class="thumbnail-grid-navigation"><a class="thumbnail-close" href="#!"><i class="fas fa-times"></i></a><a class="thumbnail-grid-nav prev" href="#!" data-grid-target="#collapseEight" data-thumbnail-grid-nav="data-thumbnail-grid-nav"><i class="fas fa-angle-left"></i></a><a class="thumbnail-grid-nav next" href="#!" data-grid-target="#!" data-thumbnail-grid-nav="data-thumbnail-grid-nav"><i class="fas fa-angle-right"></i></a></div>
<div class="col-7">
<div class="d-none d-lg-block p-0"><img class="w-100 img-fluid rounded" src="../assets/img/gallery/g9.jpg" alt="" /></div>
</div>
<div class="col-lg-5">
<h5 class="ls-1">CHRISTOPHER WOOL</h5>
<p>Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.</p><a class="btn btn-outline-dark btn-sm hvr-sweep-top hover-color-white mt-2" href="#!">Visit Website</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>