HTML demo elements

 
  • Free delivery Versand frei ab 500€
  • Quality and service Artikel für Profis
  • Securised payment Sichere Zahlung

Typography

Headings

Heading 1

<h1>...</h1>

Heading 2

<h2>...</h2>

Heading 3

<h3>...</h3>

Heading 4

<h4>...</h4>
Heading 5
<h5>...</h5>
Heading 6
<h6>...</h6>

Page title with line

<h2 class="page-title has-line">
	Page title with line
</h2>


<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.

<p> ... </p> Link style <a href="#url"> ... </a>

Inline text elements

You can use the mark tag to highlight text.

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>
  1. List item 1
  2. List item 2
  3. List item 3
    • List item
    • List item
    • List item
  4. 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
<dl>
  <dt>term</dt>
  <dd>description</dd>
  <dt>term</dt>
  <dd>description</dd>
</dl>

Gray background on element

Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo.

<div class="gray-row"> ... </div>

Quotes

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

Daniel Smith - Product manager

<blockquote>
	<p> .. quote content </p>
	<footer>
		.. quote author
	</footer>
</blockquote>

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Maecenas sed diam eget risus varius blandit sit amet non magna.


<blockquote>
	<p> .. quote content </p>
</blockquote>

Tables

Simple table

Adipiscing Mattis Ullamcorper Risus
Mattis Venenatis Pharetra
Sem Ipsum Ultricies
Nullam Amet Bibendum Ligula
<table class="table">
<tbody>
<tr>
  <th width="120px">Adipiscing</th>
  <td>Mattis Ullamcorper Risus</td>
</tr>
</tbody>
</table>


Lorem Nullam Quam
Ultricies Lorem Mattis Ullamcorper Risus Malesuada Vulputate
Cras Vulputate Amet Malesuada Consectetur Inceptos Ipsum
Fusce Fringilla Egestas Vehicula Tristique Inceptos Adipiscing
<table class="table">
<thead>
<tr>
  <th>Lorem</th>
  <th>Nullam</th>
  <th>Quam</th>
</tr>
</thead>
<tbody>
<tr>
  <td>Ultricies Lorem</td>
  <td>Mattis Ullamcorper Risus</td>
  <td>Malesuada Vulputate</td>
</tr>
</tbody>
</table>


Table striped

Adipiscing Mattis Ullamcorper Risus
Mattis Venenatis Pharetra
Sem Ipsum Ultricies
Nullam Amet Bibendum Ligula
<table class="table-striped table-bordered">
<tbody>
<tr>
  <th width="120px">Adipiscing</th>
  <td>Mattis Ullamcorper Risus</td>
</tr>
</tbody>
</table>

Table striped & bordered

Lorem Nullam Quam
Ultricies Lorem Mattis Ullamcorper Risus Malesuada Vulputate
Cras Vulputate Amet Malesuada Consectetur Inceptos Ipsum
Fusce Fringilla Egestas Vehicula Tristique Inceptos Adipiscing
<table class="table-striped table-bordered">
<thead>
<tr>
  <th>Lorem</th>
  <th>Nullam</th>
  <th>Quam</th>
</tr>
</thead>
<tbody>
<tr>
  <td>Ultricies Lorem</td>
  <td>Mattis Ullamcorper Risus</td>
  <td>Malesuada Vulputate</td>
</tr>
</tbody>
</table>

Table specs

Adipiscing Mattis Ullamcorper Risus
Mattis Venenatis Pharetra
Sem Ipsum Ultricies
Nullam Amet Bibendum Ligula
<table class="table-specs">
<tbody>
<tr>
  <th>Adipiscing</th>
  <td>Mattis Ullamcorper Risus</td>
</tr>
</tbody>
</table>

Example elements

Top aligned content with list

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.

  • 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.

a pretty image
<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.

a pretty image
<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 pretty image

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>

Button styles

Normal buttons

Button
<a href="#" class="btn primary">Button</a>
Secondaire kleur
<a href="#" class="btn secondary">Button</a>
CTA button
<a href="#" class="btn cta">Button</a>

Wide buttons

Button
<a href="#" class="btn primary wide">Button</a>
Secondaire kleur
<a href="#" class="btn secondary wide">Button</a>
CTA button
<a href="#" class="btn cta wide">Button</a>

Icon buttons

Button
<a href="#" class="btn primary">Button <i class="fa fa-angle-right"></i></a>
Secondaire kleur
<a href="#" class="btn secondary">Secondaire kleur  <i class="fa fa-times"></i></a>
CTA button
<a href="#" class="btn cta">CTA button <i class="fa fa-check"></i></a>

Icons

View all fontawesome icons

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.

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="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.

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

Layout

2 columns row

Column left

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.

Flex around

child 1 child 2 child 3 child 4

Flex between

child 1 child 2 child 3 child 4

Example with CTA buttons


Example with verticle align

A title

Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.

Grid systeem

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.

<div class="small-main-container"> ... </div>