Layout
Compleet overzicht van alle containers en layout elementen.
no-container - width: 100%;
layout-container - max-width: 1400px;
column - 5%
layout-spacing - 16px
Kleuren
Compleet overzicht van alle kleuren.
Branding
Primary
#6b8e23
Primary - Shade
#a2ab63
Primary - Contrast
#ffffff
Secondary
#dc0720
Secondary - Shade
#dc0720
Secondary - Contrast
#ffffff
Grijstinten
White
#ffffff
White - Shade
#f5f5f5
Gray - Light
#eaece2
Gray
#7f7f7f
Black
#000000
Contextueel
Body
#17171b
Border
#7f7f7f
Status
Error
#dc0720
Success
#6b8e23
Absoluut
Green
#6b8e23
Green - Light
#a2ab63
Blue - Dark
#015a8f
Blue
#0093b4
Blue - Light
#d9eff4
Red
#dc0720
Yellow
#fee334
Icons
De complete icon set die je binnen dit project kan gebruiken.
Wordpress Basis
- icon-download $icon-download
- icon-play $icon-play
- icon-question $icon-question
- icon-scissor $icon-scissor
- icon-arrow-down $icon-arrow-down
- icon-arrow-up $icon-arrow-up
- icon-arrow-right $icon-arrow-right
- icon-arrow-left $icon-arrow-left
- icon-star $icon-star
- icon-video $icon-video
- 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-left1 $icon-arrow-left1
- icon-arrow-down1 $icon-arrow-down1
- icon-arrow-right1 $icon-arrow-right1
- icon-arrow-up1 $icon-arrow-up1
Typography
Een overzicht van alle typography types.
Titels
H1 Heading - Bold - 48px
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
H2 Heading - Regular - 32px
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
H3 Heading - Regular - 24px
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
H4 Heading - Regular - 20px
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
H5 Heading - Regular - 18px
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
H6 Heading - Regular - 16px
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Tekst
Body - Light - 16px
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.
Introductie
Introductie - Regular - 20px
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.
Quote
Quote - Medium -Italic - 30px
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum
Opsomming
Opsomming
- 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
Alle link stylen.
Texteditor
Normaal
Focus
Hover
Visited