Dit is een faketekst. Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek. Wat u hier leest is een voorbeeldtekst. Deze wordt later vervangen door de uiteindelijke tekst, die nu nog niet bekend is. De faketekst is dus een tekst die eigenlijk nergens over gaat. Het grappige is, dat mensen deze toch vaak lezen. Zelfs als men weet dat het om een faketekst gaat, lezen ze toch door.

Layout

no-container - width: 100%;
layout-container - max-width: $app-grid-max-width (in _spacing.scss);
layout-container--inset-1
layout-container--inset-2
layout-container--inset-3
layout-container--inset-4
column - 5%
layout-spacing - 30px

Kleuren

absolute

black
#222

black-shade
#484848

gray-dark
#6b6b6b

warm-gray-light
#f3f0ec

gray-light
#d9d9d9

gray
#d9d9d9

gray-legal
#9797a1

brown-light
#f3f0ec

white
#fff

white-shade
#ebf5f5

aqua-dark
#0f998e

aqua-light
#ebf5f5

green-medium
#8fc8c3

green
#a3e3de

red
#e60023

red-light
#f35151

deep-purple
#2e2e43

deep-purple-alt
#3b2c39

circle
#e3f1f0

circle-shade
#c7e4e1

circle-dark
#abd6d2

contextual

primary
$color-green

secondary
$color-red

tertiary
$color-brown-light

body
$color-black-shade

border
$color-gray-light

error
$color-red

Icons / Wordpress basis

  • Maak een Icomoon set, download en plaats de inhoud in /resources/assets/fonts/icomoon. Nieuwe iconen komen dan zonder verdere configuratie beschikbaar in je project.
  • In scss: .selector::before { content: $icon-home; }
  • In html: <span class="icon-home"></span>
  • icon-arrow-skew $icon-arrow-skew
  • icon-external-link $icon-external-link
  • icon-play-line $icon-play-line
  • icon-new-tablad $icon-new-tablad
  • icon-wave $icon-wave
  • icon-star $icon-star
  • icon-play $icon-play
  • icon-pin $icon-pin
  • icon-phone $icon-phone
  • icon-mail $icon-mail
  • icon-facebook $icon-facebook
  • icon-instagram $icon-instagram
  • icon-linkedin $icon-linkedin
  • icon-youtube $icon-youtube
  • icon-whatsapp $icon-whatsapp
  • icon-twitter $icon-twitter
  • icon-pinterest $icon-pinterest
  • icon-bag $icon-bag
  • icon-user $icon-user
  • icon-hamburger $icon-hamburger
  • icon-home $icon-home
  • icon-search $icon-search
  • icon-calendar $icon-calendar
  • icon-cart $icon-cart
  • icon-minus $icon-minus
  • icon-plus $icon-plus
  • icon-cross $icon-cross
  • icon-checkmark $icon-checkmark
  • icon-chevron-left $icon-chevron-left
  • icon-chevron-down $icon-chevron-down
  • icon-chevron-right $icon-chevron-right
  • icon-chevron-up $icon-chevron-up
  • icon-arrow-left $icon-arrow-left
  • icon-arrow-down $icon-arrow-down
  • icon-arrow-right $icon-arrow-right
  • icon-arrow-up $icon-arrow-up

Fonts

Primary - 400 Primary - 700 Secondary - 400 Secondary - 700

Headings

h1 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.

h2 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.

h3 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.

h4 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.

h5 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.
h6 - Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Body text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aspernatur at, dolor ea et exercitationem fugiat harum ipsam maxime, minus nam natus necessitatibus nisi officia quibusdam, quidem quod sunt suscipit.

Introduction text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aspernatur at, dolor ea et exercitationem fugiat harum ipsam maxime, minus nam natus necessitatibus nisi officia quibusdam, quidem quod sunt suscipit.

Blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aspernatur at, dolor ea et exercitationem fugiat harum ipsam maxime, minus nam natus necessitatibus nisi officia quibusdam, quidem quod sunt suscipit

Cras mattis consectetur purus.

Unordered and ordered lists

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aspernatur at, dolor ea et exercitationem fugiat harum ipsam maxime, minus nam natus necessitatibus nisi officia quibusdam, quidem quod sunt suscipit.
  • Labore laudantium minima nisi nulla
  1. Lorem ipsum dolor sit amet
  2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aspernatur at, dolor ea et exercitationem fugiat harum ipsam maxime, minus nam natus necessitatibus nisi officia quibusdam, quidem quod sunt suscipit.
  3. Labore laudantium minima nisi nulla

Buttons

btn

Link Link - icon

btn btn--em

Link em Link em - icon

btn btn--ghost

Link ghost Link ghost - icon

btn btn--text

Link text Link text - icon

btn btn--menu

Link menu Link menu - icon

Box

Box title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus beatae, deserunt distinctio dolores eum explicabo facere illo ipsa ipsam, possimus quaerat similique soluta? Consequuntur cupiditate magni possimus rem sequi voluptatibus?
Box primary title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus beatae, deserunt distinctio dolores eum explicabo facere illo ipsa ipsam, possimus quaerat similique soluta? Consequuntur cupiditate magni possimus rem sequi voluptatibus?
Box secondary title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus beatae, deserunt distinctio dolores eum explicabo facere illo ipsa ipsam, possimus quaerat similique soluta? Consequuntur cupiditate magni possimus rem sequi voluptatibus?

Cards

Form elements

Radio legend

Checkbox legend

Styleguide

Plaatsnaam

Styleguide

Titel van veelgestelde vragen

Dit is een faketekst.

Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek. Wat u hier leest is een voorbeeldtekst. Deze wordt later vervangen door de uiteindelijke tekst, die nu nog niet bekend is. De faketekst is dus een tekst die eigenlijk nergens over gaat. Het grappige is, dat mensen deze toch vaak lezen. Zelfs als men weet dat het om een faketekst gaat, lezen ze toch door.

Dit is een faketekst.

Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek. Wat u hier leest is een voorbeeldtekst. Deze wordt later vervangen door de uiteindelijke tekst, die nu nog niet bekend is. De faketekst is dus een tekst die eigenlijk nergens over gaat. Het grappige is, dat mensen deze toch vaak lezen. Zelfs als men weet dat het om een faketekst gaat, lezen ze toch door.

Dit is een faketekst.

Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek. Wat u hier leest is een voorbeeldtekst. Deze wordt later vervangen door de uiteindelijke tekst, die nu nog niet bekend is. De faketekst is dus een tekst die eigenlijk nergens over gaat. Het grappige is, dat mensen deze toch vaak lezen. Zelfs als men weet dat het om een faketekst gaat, lezen ze toch door.

Dit is een faketekst.

Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek. Wat u hier leest is een voorbeeldtekst. Deze wordt later vervangen door de uiteindelijke tekst, die nu nog niet bekend is. De faketekst is dus een tekst die eigenlijk nergens over gaat. Het grappige is, dat mensen deze toch vaak lezen. Zelfs als men weet dat het om een faketekst gaat, lezen ze toch door.

Dit is een faketekst.

Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek. Wat u hier leest is een voorbeeldtekst. Deze wordt later vervangen door de uiteindelijke tekst, die nu nog niet bekend is. De faketekst is dus een tekst die eigenlijk nergens over gaat. Het grappige is, dat mensen deze toch vaak lezen. Zelfs als men weet dat het om een faketekst gaat, lezen ze toch door.

Dit is een faketekst.

Alles wat hier staat is slechts om een indruk te geven van het grafische effect van tekst op deze plek. Wat u hier leest is een voorbeeldtekst. Deze wordt later vervangen door de uiteindelijke tekst, die nu nog niet bekend is. De faketekst is dus een tekst die eigenlijk nergens over gaat. Het grappige is, dat mensen deze toch vaak lezen. Zelfs als men weet dat het om een faketekst gaat, lezen ze toch door.