import { NavBar, Link } from "@trbl.io/hartmut";
<NavBar>
    <Link href="/">My Site</Link>
    <Link href="/album">The Album</Link>
    <Link>The Photo</Link>
</NavBar>

import { Title } from "@trbl.io/hartmut";
<Title>My Photo Gallery</Title>

Lorem ipsum

Lorem ipsum dolor sit amet consectetur adipiscing elit, pharetra scelerisque nascetur tempor praesent sagittis tortor, faucibus vel cursus facilisis rhoncus euismod. Hac rhoncus nulla nibh sociis cubilia magnis cursus condimentum facilisis tincidunt lectus, sollicitudin maecenas malesuada nisi scelerisque imperdiet turpis risus parturient egestas, ultrices sapien porttitor quisque habitasse non curabitur dignissim massa donec. Blandit taciti justo penatibus ligula lacinia erat suscipit potenti tortor, fringilla fames vitae malesuada massa nibh fermentum libero, dignissim rutrum curae eu montes condimentum feugiat habitant.

Posuere ridiculus euismod facilisi ligula turpis, sem potenti bibendum libero urna aliquam, et nec sociosqu elementum. Nostra odio ligula convallis cursus fringilla at in, quam donec cras eleifend hendrerit ante pretium vestibulum, vulputate nisi taciti porttitor proin sed. Netus pretium venenatis mollis massa duis sollicitudin vulputate proin, placerat leo class et turpis nam curabitur.

import { Panel } from "@trbl.io/hartmut";
<Panel>
    <h1>Lorem ipsum</h1>
    <p>
        Lorem ipsum dolor sit amet consectetur adipiscing elit, pharetra scelerisque nascetur tempor
        praesent sagittis tortor, faucibus vel cursus facilisis rhoncus euismod. Hac rhoncus nulla
        nibh sociis cubilia magnis cursus condimentum facilisis tincidunt lectus, sollicitudin
        maecenas malesuada nisi scelerisque imperdiet turpis risus parturient egestas, ultrices
        sapien porttitor quisque habitasse non curabitur dignissim massa donec. Blandit taciti justo
        penatibus ligula lacinia erat suscipit potenti tortor, fringilla fames vitae malesuada massa
        nibh fermentum libero, dignissim rutrum curae eu montes condimentum feugiat habitant.
    </p>
    <p class="disclaimer">
        Posuere ridiculus euismod facilisi ligula turpis, sem potenti bibendum libero urna aliquam,
        et nec sociosqu elementum. Nostra odio ligula convallis cursus fringilla at in, quam donec
        cras eleifend hendrerit ante pretium vestibulum, vulputate nisi taciti porttitor proin sed.
        Netus pretium venenatis mollis massa duis sollicitudin vulputate proin, placerat leo class
        et turpis nam curabitur.
    </p>
</Panel>

import { Photo } from "@trbl.io/hartmut";
<Photo src="https://via.placeholder.com/320x200.png"
       width="320" height="200"
       title="Placeholder by placeholder.com" />

import { Photo } from "@trbl.io/hartmut";
<Photo src="https://via.placeholder.com/100x100.png"
       width="100" height="100"
       title="Placeholder by placeholder.com"
       href="https://www.placeholder.com" />

Placeholder by placeholder.com

Lorem ipsum dolor sit amet consectetur adipiscing elit, pharetra scelerisque nascetur tempor praesent sagittis tortor, faucibus vel cursus facilisis rhoncus euismod.

Hac rhoncus nulla nibh sociis cubilia magnis cursus condimentum facilisis tincidunt lectus, sollicitudin maecenas malesuada nisi scelerisque imperdiet turpis risus parturient egestas, ultrices sapien porttitor quisque habitasse non curabitur dignissim massa donec.

import { Photo } from "@trbl.io/hartmut";
<div style={{ width: 240 }}>
    <Photo src="https://via.placeholder.com/240x100.png"
           width="240" height="100"
           title="Placeholder by placeholder.com"
           href="https://www.placeholder.com">
        <div>
            <Link href="https://www.placeholder.com">Placeholder by placeholder.com</Link>
        </div>
        <div>
            Lorem ipsum dolor sit amet consectetur adipiscing elit, pharetra scelerisque nascetur tempor
            praesent sagittis tortor, faucibus vel cursus facilisis rhoncus euismod.
        </div>
        <div>
            Hac rhoncus nulla nibh sociis cubilia magnis cursus condimentum facilisis tincidunt lectus,
            sollicitudin maecenas malesuada nisi scelerisque imperdiet turpis risus parturient egestas,
            ultrices sapien porttitor quisque habitasse non curabitur dignissim massa donec.
        </div>
    </Photo>
</div>

import { Footer } from "@trbl.io/hartmut";
<Footer>
    Built with ❤ in Sydney<br />
    <a href="https://hartmutjs.trbl.io">hartmut.js</a> is based
    on <a href="http://stopdesign.com/templates/photos/">Stopdesign</a>
</Footer>