MODULE 09
Open demo ↗
Masonry Gallery
Responsive columns with a keyboard-accessible image detail dialog.
HTML source & reuse instructions
Load Bootstrap, Versa CSS/JS, and your custom layer. Give every copied ID a unique value and update its matching references.
<div class="lab-masonry">
<button aria-label="View layout study 1" class="lab-gallery-item" data-lab-gallery="">
<div aria-label="Illustrative website layout: Layout study 1" class="lab-art art-0" role="img">
<div class="art-window">
<div class="art-dots">
● ● ●
</div>
<div class="art-layout">
<div>
<small>
MAKE SOMETHING GREAT
</small>
<strong>
Layout study 1
</strong>
<span class="art-line">
</span>
<span class="art-line short">
</span>
<span class="art-pill">
</span>
</div>
<div class="art-orb">
</div>
</div>
</div>
</div>
<span>
Layout study 1 ↗
</span>
</button>
<button aria-label="View layout study 2" class="lab-gallery-item" data-lab-gallery="">
<div aria-label="Illustrative website layout: Layout study 2" class="lab-art art-1" role="img">
<div class="art-window">
<div class="art-dots">
● ● ●
</div>
<div class="art-layout">
<div>
<small>
MAKE SOMETHING GREAT
</small>
<strong>
Layout study 2
</strong>
<span class="art-line">
</span>
<span class="art-line short">
</span>
<span class="art-pill">
</span>
</div>
<div class="art-orb">
</div>
</div>
</div>
</div>
<span>
Layout study 2 ↗
</span>
</button>
<button aria-label="View layout study 3" class="lab-gallery-item" data-lab-gallery="">
<div aria-label="Illustrative website layout: Layout study 3" class="lab-art art-2" role="img">
<div class="art-window">
<div class="art-dots">
● ● ●
</div>
<div class="art-layout">
<div>
<small>
MAKE SOMETHING GREAT
</small>
<strong>
Layout study 3
</strong>
<span class="art-line">
</span>
<span class="art-line short">
</span>
<span class="art-pill">
</span>
</div>
<div class="art-orb">
</div>
</div>
</div>
</div>
<span>
Layout study 3 ↗
</span>
</button>
<button aria-label="View layout study 4" class="lab-gallery-item" data-lab-gallery="">
<div aria-label="Illustrative website layout: Layout study 4" class="lab-art art-0" role="img">
<div class="art-window">
<div class="art-dots">
● ● ●
</div>
<div class="art-layout">
<div>
<small>
MAKE SOMETHING GREAT
</small>
<strong>
Layout study 4
</strong>
<span class="art-line">
</span>
<span class="art-line short">
</span>
<span class="art-pill">
</span>
</div>
<div class="art-orb">
</div>
</div>
</div>
</div>
<span>
Layout study 4 ↗
</span>
</button>
<button aria-label="View layout study 5" class="lab-gallery-item" data-lab-gallery="">
<div aria-label="Illustrative website layout: Layout study 5" class="lab-art art-1" role="img">
<div class="art-window">
<div class="art-dots">
● ● ●
</div>
<div class="art-layout">
<div>
<small>
MAKE SOMETHING GREAT
</small>
<strong>
Layout study 5
</strong>
<span class="art-line">
</span>
<span class="art-line short">
</span>
<span class="art-pill">
</span>
</div>
<div class="art-orb">
</div>
</div>
</div>
</div>
<span>
Layout study 5 ↗
</span>
</button>
<button aria-label="View layout study 6" class="lab-gallery-item" data-lab-gallery="">
<div aria-label="Illustrative website layout: Layout study 6" class="lab-art art-2" role="img">
<div class="art-window">
<div class="art-dots">
● ● ●
</div>
<div class="art-layout">
<div>
<small>
MAKE SOMETHING GREAT
</small>
<strong>
Layout study 6
</strong>
<span class="art-line">
</span>
<span class="art-line short">
</span>
<span class="art-pill">
</span>
</div>
<div class="art-orb">
</div>
</div>
</div>
</div>
<span>
Layout study 6 ↗
</span>
</button>
</div>
<dialog aria-label="Gallery detail" class="lab-dialog" data-lab-dialog="">
<button class="btn btn-dark mb-3" data-close-dialog="">
Close ×
</button>
<div data-dialog-content="">
</div>
</dialog>