--- /dev/null
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.thymeleaf.org">
+ <head>
+ <title>Fragments</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/base.less"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/screen.less" media="screen"/>
+ <link rel="stylesheet/less" type="text/css" href="../../less/print.less" media="print"/>
+ <script src="../../js/less-1.7.0.min.js"></script>
+ </head>
+ <body>
+ <h1>Explanation fo the german word "Impressum"</h1>
+ <hr />
+ <aside class="m" th:fragment="about">
+ <h1>What the f*#!@ is an <em>Impressum</em> ?!?</h1>
+ The german law enforces the so called <em>Impressum</em> to enable
+ customers to easily find out all juristically relevant informations
+ about the company, that rules a site.
+ <h1>Find out more...</h1>
+ If you just want to learn more about juplo you should better
+ <a href="../about.html" th:href="@{/about.html}" title="Learn more about juplo now">visit our about-pages</a>.
+ </aside>
+ <hr />
+ <h1>Work-in-progress-hint</h1>
+ <hr />
+ <article class="main" layout:fragment="wip(title)">
+ <header><h1 th:text="${title}">PAGE-TITLE</h1></header>
+ <div class="wip" th:fragment="wip">
+ <img class="w" src="..//img/comming-soon.png" alt="Comming soon..."/>
+ <p th:include="/templates/layout :: maincontent" th:remove="tag">
+ PAGE-CONTENT
+ </p>
+ </div>
+ </article>
+ <hr />
+ <h1>Marginalspalte</h1>
+ <hr />
+ <div th:fragment="marginalcontent" th:remove="tag">
+ <aside class="m">
+ <h1>Other nasty but marginal stuff</h1>
+ <p>
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+ eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+ ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+ aliquip ex ea commodo consequat. Duis aute irure dolor in
+ reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+ pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+ culpa qui officia deserunt mollit anim id est laborum.
+ </p>
+ </aside>
+ <aside class="m">
+ <h1>More nasty stuff</h1>
+ <p>
+ This one is really short!
+ </p>
+ </aside>
+ </div>
+ <hr />
+ </body>
+</html>