¶ Inhouse html templates
We do have a few templates. Please always leave a blank line between html and markdown.
¶ Tiles
<div class="kacheln">
<a href="/link/to/page" title="Headline">
<span>Headline</span>
<p>Short description</p>
</a>
<a href="/link/to/page" title="Headline">
<span>Headline</span>
<p>Short description</p>
</a>
</div>
Renders:
¶ Smaller tiles with image
Example: Branch list
<div class="kacheln klein">
<a href="/link/to/page" title="Headline">
<img src="/link/to/image">
<p>Short description</p>
<span>Headline</span>
</a>
<a href="/link/to/page" title="Headline">
<img src="/link/to/image">
<p>Short description</p>
<span>Headline</span>
</a>
</div>
Renders:
Short description
Headline
Short description
Headline
Short description
Headline
Short description
Headline
Short description
Headline¶ Tiny tiles with image
Use for contact lists. The profil pictures need to be 250x250px and cut in a circle.
Example: Governance Curators
<div class="kacheln klein smallest">
<span>
<img src="/link/to/image">
<span>Nick</span>
<p>Matrix address</p>
</span>
<span>
<img src="/link/to/image">
<span>Nick</span>
<p>Matrix address</p>
</span>
</div>
Renders:
Nick
@Matrix:address
Nick
@Matrix:address
Nick
@Matrix:address
Nick
@Matrix:address
Nick
@Matrix:address
Nick
@Matrix:address
Nick
@Matrix:address
Nick
@Matrix:address
¶ Full width tiles with image
Use to imply hierarchy.
Example: Overview Governance structure
<div class="kacheln full_width">
<a href="/link/to/page" title="Headline">
<span>Headline</span>
<p>Short description</p>
</a>
<a href="/link/to/page" title="Headline">
<span>Headline</span>
<p>Short description</p>
</a>
</div>
Renders:
¶ Branch logo
Put this above the first header:
<img class="branch_logo" src="/link/to/image">
Renders:
¶ Article image floating right
Put this below the first header:
<img class="article_img" src="/link/to/image">
Renders:
¶ Lightbox
To make an image opening in a lightbox, add the class "open_lightbox" to it.
"max_400_w" is optional and sets a max width of 400px.
<img class="open_lightbox max_400_w" src="/link/to/image">
Renders:
¶ Tool header template
With warnings and the image floats to the right and opens in a lightbox.
Please use the first warning if the tool requires an introduction.
<div class="auth_badge"><span><b>Do not use</b> the >TOOL< without having received instructions and official permission from an authorized person <b>!</b></span></div>
# Tool name
<img class="article_img open_lightbox" src="/link/to/image">
Please read the [Space Rules](/en/about-xhain/space-rules) first, especially the sections on "safety" and "use of machinery".
This page is intended as a reminder and does NOT replace a personal introduction to the drill press.
Renders:
¶ Tool name
Please read the Space Rules first, especially the sections on "safety" and "use of machinery".
This page is intended as a reminder and does NOT replace a personal introduction to the drill press.