Typography

Headings

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

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.

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

List styles

<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

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

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

Tables

Simple table

<table class="table">
<tbody>
<tr>
  <th width="120px">Adipiscing</th>
  <td>Mattis Ullamcorper Risus</td>
</tr>
</tbody>
</table>

<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

<table class="table-striped table-bordered">
<tbody>
<tr>
  <th width="120px">Adipiscing</th>
  <td>Mattis Ullamcorper Risus</td>
</tr>
</tbody>
</table>

Table striped & bordered

<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

<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

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

Button styles

<a href="#" class="btn primary">Button</a>

<a href="#" class="btn secondary">Button</a>

<a href="#" class="btn cta">Button</a>

<a href="#" class="btn primary wide">Button</a>

<a href="#" class="btn secondary wide">Button</a>

<a href="#" class="btn cta wide">Button</a>

<a href="#" class="btn primary">Button <i class="fa fa-angle-right"></i></a>

<a href="#" class="btn secondary">Secondaire kleur  <i class="fa fa-times"></i></a>

<a href="#" class="btn cta">CTA button <i class="fa fa-check"></i></a>

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

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

<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

Flex between

Example with CTA buttons

Example with verticle align

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)

<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

Containers

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

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