styleguide

Colours

#3A3A3A #FBCA55 #6BADB1 #5B7587 #FFF7F4
#3A3A3A #FBCA55 #6BADB1 #5B7587 #FFF7F4

Typography

<h1>Heading 1</h1>

  1. font-size: 24px
  2. font-weight: bold
  3. margin-bottom: 8px

Heading 1

Maybe there's a happy little bush that lives right there. Clouds are free. They just float around the sky all day and have fun. If there's two big trees invariably sooner or later there's gonna be a little tree. Clouds are free they come and go as they please.

<h2>Heading 2</h2>

  1. font-size: 20px
  2. font-weight: bold
  3. margin-bottom: 8px

Heading 2

It's almost like something out of a fairytale book. Everything is happy if you choose to make it that way. I really believe that if you practice enough you could paint the 'Mona Lisa' with a two-inch brush. In your imagination you can go anywhere you want. Anytime you learn something your time and energy are not wasted. This is where you take out all your hostilities and frustrations. It's better than kicking the puppy dog around and all that so.

<h3>Heading 3</h3>

  1. font-size: 18px
  2. font-weight: bold
  3. margin-bottom: 8px

Heading 3

This is gonna be a happy little seascape. Sometimes you learn more from your mistakes than you do from your masterpieces. Everyone needs a friend. Friends are the most valuable things in the world. Tree trunks grow however makes them happy. Even trees need a friend. We all need friends. Talent is a pursued interest. That is to say, anything you practice you can do.

<h4>Heading 4</h4>

  1. font-size: 16px
  2. font-weight: bold
  3. margin-bottom: 8px

Heading 4

Maybe he has a little friend that lives right over here. Just beat the devil out of it. A fan brush is a fantastic piece of equipment. Use it. Make friends with it. I will take some magic white, and a little bit of Vandyke brown and a little touch of yellow. Get tough with it, get strong. Use what happens naturally, don't fight it. You have to make these big decisions.

Special Headings

<h1 class="main-title">Main Title</h1>

  1. font-size: 32px
  2. font-weight: bold
  3. margin-top: 8px
  4. margin-bottom: 12px
  5. text-align: center

Main Title

This is the time to get out all your flustrations, much better than kicking the dog around the house or taking it out on your spouse. We start with a vision in our heart, and we put it on canvas. I thought today we would do a happy little picture. Go out on a limb - that's where the fruit is.

<h1 class="sub-title">Sub Title</h1>

  1. font-size: 24px
  2. font-weight: bold
  3. margin-top: 32px
  4. margin-bottom: 8px
  5. text-align: center

Sub Title

Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.


Paragraphs

<p>Paragraph</p>

  1. font-size: 15px
  2. font-weight: normal
  3. margin-bottom: 8px

Paragraph

Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.

Buttons

<a class="button button-success" href="#">Button success</a>

<a class="button button-secundary--light" href="#">Button secundary light</a>

<a class="button button-secundary--dark" href="#">Button secundary dark</a>

List types

Unordered list

  • List Item 1
  • List Item 2
  • List Item 3

Opsommingstekens

  • List Item 1
  • List Item 2
  • List Item 3

Ordered list

  1. List Item 1
  2. List Item 2
  3. List Item 3

HTML

<ul>

<li>List Item 1</li>

<li>List Item 2</li>

<li>List Item 3</li>

</ul>

HTML

<ul class="bullets">

<li>List Item 1</li>

<li>List Item 2</li>

<li>List Item 3</li>

</ul>

HTML

<ol>

<li>List Item 1</li>

<li>List Item 2</li>

<li>List Item 3</li>

</ol>

Text columns

This is gonna be a happy little seascape. Sometimes you learn more from your mistakes than you do from your masterpieces. Everyone needs a friend. Friends are the most valuable things in the world. Tree trunks grow however makes them happy. Even trees need a friend. We all need friends. Talent is a pursued interest. That is to say, anything you practice you can do.
It's almost like something out of a fairytale book. Everything is happy if you choose to make it that way. I really believe that if you practice enough you could paint the 'Mona Lisa' with a two-inch brush. In your imagination you can go anywhere you want. Anytime you learn something your time and energy are not wasted. This is where you take out all your hostilities and frustrations. It's better than kicking the puppy dog around and all that so.
<div class="container">
   <div class="cols">
      <div class="xs-6">
         <p> Text </p>
      </div>
      <div class="xs-6">
         <p> Text </p>
      </div>
   </div>
</div>

Text columns equal height

It's almost like something out of a fairytale book. Everything is happy if you choose to make it that way. I really believe that if you practice enough you could paint the 'Mona Lisa' with a two-inch brush. In your imagination you can go anywhere you want. Anytime you learn something your time and energy are not wasted. This is where you take out all your hostilities and frustrations. It's better than kicking the puppy dog around and all that so.
Maybe there's a happy little bush that lives right there. Clouds are free. They just float around the sky all day and have fun. If there's two big trees invariably sooner or later there's gonna be a little tree. Clouds are free they come and go as they please.
<div class="container">
   <div class="cols cols-stretch-vertical">
      <div class="xs-6">
         <div class="box stretch-vertical-height"> Text </div>
      </div>
      <div class="xs-6">
         <div class="box stretch-vertical-height"> Text </div>
      </div>
   </div>
</div>

Categories - 2 kolommen

<div class="main-categories container">
	<div class="cols">
		<div class="xsm-12 sm-6">
			<div class="main-categories__item"><a href="#"><img class="img-responsive" src="/media/test.png" /> <span class="button button-sw-right">Happy Text</span> </a></div>
		</div>

		<div class="xsm-12 sm-6">
			<div class="main-categories__item mob-button"><a href="#"><img class="img-responsive" src="/media/test.png" /> <span class="button button-sw-right">Happy Text</span> </a></div>
		</div>

		<div class="xsm-12 sm-6">
			<div class="main-categories__item mob-button"><a href="#"><img class="img-responsive" src="/media/test.png" /> <span class="button button-sw-right">Happy Text</span> </a></div>
		</div>

		<div class="xsm-12 sm-6">
			<div class="main-categories__item mob-button"><a href="#"><img class="img-responsive" src="/media/test.png" /> <span class="button button-sw-right">Happy Text</span> </a></div>
		</div>
	</div>
</div>

Categories - 3 kolommen

<div class="main-categories container">
	<div class="cols">
		<div class="xsm-12 sm-4">
			<div class="main-categories__item mob-button"><a href="#"><img class="img-responsive" src="/media/test.png" /> <span class="button button-sw-right">Happy Text</span> </a></div>
		</div>

		<div class="xsm-12 sm-4">
			<div class="main-categories__item mob-button"><a href="#"><img class="img-responsive" src="/media/test.png" /> <span class="button button-sw-right">Happy Text</span> </a></div>
		</div>

		<div class="xsm-12 sm-4">
			<div class="main-categories__item mob-button"><a href="#"><img class="img-responsive" src="/media/test.png" /> <span class="button button-sw-right">Happy Text</span> </a></div>
		</div>
	</div>
</div>

Divider

Lijn onder/tussen de secties. De ruimte boven en onder de divider kun je zelf gemakkelijk aanpassen met standaard classes

 
<div class="divider-line container"> </div>
<div class="divider-line container margin-t-20 margin-b-20"> </div>
<div class="divider-line container margin-t-30 margin-b-30"> </div>

Elementen voor opouw SEO-tekst vind je hier.

De Marvel vind je hier.