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>

Content elements

.intro

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

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>
Normal link
Link style <a href="#url"> ... </a>
Narrow title

A multiline devries Title

.narrow-title

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
.uppercase
To make something uppercase add .uppercase as classname
.no-uppercase
To remove uppercase modifier (on headings for instance)

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>

Checkmark list-style

  • Ultricies Commodo Adipiscing
  • Tellus Purus Vulputate Porta
  • Euismod Fusce
  • Fermentum Venenatis Vehicula
<ul class="checkmarks">
	<li>Ultricies Commodo Adipiscing</li>
	<li>Tellus Purus Vulputate Porta</li>
	<li>Euismod Fusce</li>
	<li>Fermentum Venenatis Vehicula</li>
</ul>

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>

Widgets

Widgets found on this page are custom widgets for devries.

DVVS: Intro text

Fringilla Cras Malesuada Inceptos

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id elit non mi porta gravida at eget metus.

DVVS: Image text; align right

Ultricies Purus Commodo

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum.

DVVS: Image text; align left

Vestibulum Venenatis Purus

Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna.

DVVS: Action block type 1

Subtitel Titel CTA button

DVVS: Action block type 3

Subtitel Titel
Actie titel Actie subtitel
CTA button Extra

DVVS: Action block type 4

Subtitel Titel
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sagittis lacus vel augue la oreet tell
Titel

DVVS: Featured product

Uitgelicht

€ 0,00 ontdek

DVVS: Nieuwsbrief

Nieuwsbrief
Nieuwsbrief verhalen beginnen hier

Wekelijkse update met tips, de agenda, cadeauhulp & inspiratie.

DVVS: Thema banner

Title of banner

Titel voor de lijst

Call to action

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="row row-gutter">
	<div class="col-m-6">
		<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-m-6">
		<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="button primary">Button</a>
Secondaire kleur
<a href="#" class="button secondary">Button</a>
CTA button
<a href="#" class="button red">Button</a>

Wide buttons

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

Icon buttons

Button
<a href="#" class="button primary">Button <i class="fa fa-angle-right"></i></a>
Secondaire kleur
<a href="#" class="button secondary">Secondaire kleur  <i class="fa fa-times"></i></a>
CTA button
<a href="#" class="button red">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

Layout modifiers

.v-margin
Creates a space between this and the previous / following item of 60px
.dark-bg
Makes the background of element devries dark gray
.light-bg
Makes the background of element devries beige

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="row row-gutter">
	<div class="col-m-6">
		.. left column content ..
	</div>
	<div class="col-m-6">
		.. 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 .col-m-X div's. Kijk hieronder voor een voorbeeld.

3 kolommen grid voorbeeld:
Voor een 3-col grid, heb je 3 x een col-m-3 div nodig. (3 x 4 = 12) Het is met dit grid ook mogelijk om voor mobiel een alternatieve weergave te kiezen, door gebruik te maken van -s- ipv -m-, of bijvoorbeeld -l- voor desktop. Dus als een div de classe "col-s-8 col-m-4" heeft, dan is deze op mobiel 8/12 breed, en op desktop 4/12

Titel 1

Euismod semper. Donec sed odio dui. Nullam quis risus eget urna mollis ornare donec sed odio dui.

Titel 2

Euismod semper. Donec sed odio dui. Nullam quis risus eget urna mollis ornare donec sed odio dui.

Titel 3

Euismod semper. Donec sed odio dui. Nullam quis risus eget urna mollis ornare donec sed odio dui.

Titel 4

Euismod semper. Donec sed odio dui. Nullam quis risus eget urna mollis ornare donec sed odio dui.

	<div class="row row-gutter">
		<div class="col-m-3">
			Col #1
		</div>
		<div class="col-m-3">
			Col #2
		</div>
		<div class="col-m-3">
			Col #3
		</div>
		<div class="col-m-3">
			Col #4
		</div>
	</div>

Simple 12 column grid

1
1
1
1
1
1
1
1
1
1
1
1
col-m-2
col-m-2
col-m-2
col-m-2
col-m-2
col-m-2
col-m-3
col-m-3
col-m-3
col-m-3
col-m-4
col-m-4
col-m-4
col-m-5
col-m-5
col-m-2
col-m-6
col-m-6
col-m-7
col-m-5
col-m-8
col-m-4
col-m-12