Diese Webseite verwendet CookiesWir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anbieten zu können und die Zugriffe auf unsere Website zu analysieren. Außerdem geben wir Informationen zu Ihrer Verwendung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Unsere Partner führen diese Informationen möglicherweise mit weiteren Daten zusammen, die Sie ihnen bereitgestellt haben oder die sie im Rahmen Ihrer Nutzung der Dienste gesammelt haben. Sie geben Einwilligung zu unseren Cookies, wenn Sie unsere Webseite weiterhin nutzen.Cookies erlauben
<div class="header-with-link">
<h2>Header with link</h2>
<a href="#">more</a>
</div>
Content elements
Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
<p class="intro"> ... </p>
Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Cras mattis consectetur purus sit amet fermentum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
<p>You can use the mark tag to <mark>highlight</mark> text.</p><p><del>This line of text is meant to be treated as deleted text.</del></p><p><s>This line of text is meant to be treated as no longer accurate.</s></p><p><ins>This line of text is meant to be treated as an addition to the document.</ins></p><p><u>This line of text will render as underlined</u></p><p><small>This line of text is meant to be treated as fine print.</small></p><p><strong>This line rendered as bold text.</strong></p><p><em>This line rendered as italicized text.</em></p>
Text modifiers
a-left
To align text left (is by default), you can add a-left to the container element
a-center
To align text center, you can add a-center to the container element
a-right
To align text right, you can add a-right to the container element
List styles
List item 1
List item 2
List item 3
List item 3.1
List item 3.2
List item 3.3
List item 4
<ul> .. </ul>
List item 1
List item 2
List item 3
List item
List item
List item
List item 4
<ol> .. </ol>
Inline menu list-style
Will put list inline, and add a "|" between the listitems
List item 1
List item 2
List item 3
<ul class="inline-menu"> .. </ul>
Definition lists
definition list dt
definition list dd
definition list dt
definition list dd
Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit
Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
Malesuada Condimentum Venenatis
Amet Ridiculus Nibh
Risus Nibh
Fringilla Nibh
<h3>A title</h3>
<div class="two-col">
<div class="col">
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod.</p>
</div>
<div class="col">
<ul>
<li>Donec ullamcorper nulla non metus auctor fringilla.</li>
<li>Malesuada Condimentum Venenatis</li>
<li>Amet Ridiculus Nibh</li>
<li>Risus Nibh</li>
<li>Fringilla Nibh</li>
</ul>
</div>
</div>
Vertically centered image and content
A title
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
<div class="inline-flex-between f-center f-mobile-verticle">
<div style="max-width:500px;">
<h3>A title</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
</div>
<div>
<img src="http://via.placeholder.com/400x500" alt="a pretty image" width="400" height="500" class="m-l">
</div>
</div>
A title
Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod.
Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo.
Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.
<div class="inline-flex-between f-center f-mobile-verticle">
<div style="max-width:500px;">
<h3>A title</h3>
<p class="intro">Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod.</p>
<p>Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
<div>
<img src="http://via.placeholder.com/400x300" alt="a pretty image" width="400" height="300" class="m-l">
</div>
</div>
A title
Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod.
<div class="inline-flex-between f-center f-mobile-verticle">
<div>
<img src="http://via.placeholder.com/400x300" alt="a pretty image" width="400" height="300" class="m-r">
</div>
<div style="max-width:500px;">
<h3>A title</h3>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo. Etiam porta sem malesuada magna mollis euismod.</p>
</div>
</div>
Any icon of fontawesome is usable within this theme. Simply copy the icon tag from theire site, and it should work.
Some example icons
List icons
List icons
can be used
as bullets
in lists
Use fa-ul and fa-li to easily replace default bullets in unordered lists.
<ulclass="fa-ul"><li><iclass="fa-li fa fa-check-square"></i>List icons</li><li><iclass="fa-li fa fa-check-square"></i>can be used</li><li><iclass="fa-li fa fa-spinner fa-spin"></i>as bullets</li><li><iclass="fa-li fa fa-square"></i>in lists</li></ul>
Larger Icons
fa-lg
fa-2x
fa-3x
fa-4x
fa-5x
To increase icon sizes relative to their container, use the fa-lg (33% increase), fa-2x,
fa-3x, fa-4x, or fa-5x classes.
Aenean lacinia bibendum nulla sed consectetur. Maecenas sed diam eget risus varius blandit sit amet non magna.
Column right
Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Sed posuere consectetur est at lobortis.
<div class="two-col">
<div class="col">
.. left column content ..
</div>
<div class="col">
.. right column content ..
</div>
</div>
Flex distribute
To evenly distribute elements across a row, we created 2 inline flexbox classes to suite your needs. Flexbox will try to fit everything you put into its container, on 1 row, evenly distributed.
To use flexbox, you need to create a container element with eather inline-flex-around or inline-flex-between as classname.
Next, for mobile, you could add the f-mobile-verticle class to make sure everything is placed below eachother on mobile, because it propably won't fit.
Also, it's possible to use f-wrap as a extra modifier. Where flexbox normaly will simple force everything in 1 row, with f-wrap as a class, it will push all 'un-fitting' items to the next rule.
Er is een 12-kolommen grid op de site geconfigureerd. Dit kan je gebruiker door een .row <div> toe te voegen, met hierin .spanX div's. Kijk hieronder voor een voorbeeld.
3 kolommen grid voorbeeld:
Voor een 3-col grid, heb je 3 x een span4 div nodig. (3 x 4 = 12)
Col #1
Col #2
Col #3
<div class="row">
<div class="span4">
Col #1
</div>
<div class="span4">
Col #2
</div>
<div class="span4">
Col #3
</div>
</div>
Simple 12 column grid
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
5
5
2
6
6
7
5
8
4
Containers
The main container (1160px content width)
Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper.
Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
<div class="main-container"> ... </div>
A small main container (830px content width)
Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper.
Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.