<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tiny Components | Masonry</title>
<link rel="icon" href="data:,">
<link href="/example.css" rel="stylesheet" type="text/css">
</head>
<body>
<header class="header">
<div class="bar">
<div class="bar__start">
<h1 class="m-top-4 m-bottom-4 h4">
@tiny-components/masonry
</h1>
</div>
<div class="bar__main justify-end">
<a class="button button--small m-left-sm-3 m-bottom-0" href="https://gitea.node001.net/tiny-components/slider" rel="noopener" target="_blank">
Gitea
<svg class="m-left-3 icon fill-text" aria-hidden="true">
<use xlink:href="/symbol-defs.svg#icon-gitea"></use>
</svg>
</a>
<a class="button button--small m-left-sm-3 m-bottom-0" href="https://gitea.node001.net/tiny-components/slider" rel="noopener" target="_blank">
Github
<svg class="m-left-3 icon fill-text" aria-hidden="true">
<use xlink:href="/symbol-defs.svg#icon-github"></use>
</svg>
</a>
</div>
</div>
</header>
<div class="tiny-masonry">
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>1</span></div></div>
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>2</span></div></div>
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>3</span></div></div>
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>4</span></div></div>
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>5</span></div></div>
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>6</span></div></div>
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>7</span></div></div>
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>8</span></div></div>
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>9</span></div></div>
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>10</span></div></div>
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>11</span></div></div>
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>12</span></div></div>
</div>
<script defer src="/example.js"></script>
</body>
</html>