Layout
Kleuren
absolute
black-shade
#242424
gray
#3e3e3e
gray-dark
#6b6b6b
gray-light
#d9d9d9
gray-form
#585858
gray-form-light
#4f575f
white
#fff
white-shade
#f7f7f7
blue
#002d6a
blue-shade
#e5f4fb
blue-dark
#002442
blue-light
#008fdb
blue-border
#c0dceb
orange
#cc4405
border
#ededeb
contextual
black
$color-black-shade
primary
$color-blue
secondary
$color-blue-light
body
$color-black-shade
error
$color-orange
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-close $icon-close
- icon-chevron-down2 $icon-chevron-down2
- icon-arrow-right $icon-arrow-right
- icon-linkedin $icon-linkedin
- icon-facebook $icon-facebook
- icon-chevron-right $icon-chevron-right
- icon-map $icon-map
- icon-prize $icon-prize
- icon-arrow-bottom-left $icon-arrow-bottom-left
- icon-arrow-bottom-right $icon-arrow-bottom-right
- icon-arrow-left-small $icon-arrow-left-small
- icon-arrow-right-small $icon-arrow-right-small
- icon-arrow-top-left $icon-arrow-top-left
- icon-arrow-top-right $icon-arrow-top-right
- icon-briefcase $icon-briefcase
- icon-checked $icon-checked
- icon-clock $icon-clock
- icon-flag $icon-flag
- icon-star $icon-star
- icon-play $icon-play
- icon-pin $icon-pin
- icon-phone $icon-phone
- icon-mail $icon-mail
- icon-instagram $icon-instagram
- 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-up $icon-chevron-up
- icon-arrow-left $icon-arrow-left
- icon-arrow-down $icon-arrow-down
- icon-arrow-up $icon-arrow-up
Fonts
Primary - 400 Primary - 700 Secondary - 400 Secondary - 700Headings
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
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
- 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
Links
Box
Cards
Form elements