Rondleiding bij ons

Styleguide

HomeStyleguide

Layout

Compleet overzicht van alle containers en layout elementen.

no-container - width: 100%;
layout-container - max-width: 1440px - $app-grid-max-width (in _variables.scss);
layout-container--inset-1
layout-container--inset-2
layout-container--inset-3
layout-container--inset-4
column - 4,166%
layout-spacing - 16px

Kleuren

Compleet overzicht van alle kleuren, zowel de definities als de context.

Black $color-black -
Black -- Shade $color-black--shade -
Gray $color-gray -
Gray -- Dark $color-gray--dark -
Gray -- Light $color-gray-light -
White $color-white $color-secondary--contrast, $color-body--diap, $color-heading--diap, $color-background--diap
Blue -- Dark $color-blue--dark $color-heading
Blue -- Light $color-blue--light -
Green $color-green $color-success
Green -- Dark $color-green--dark -
Green -- Shade $color-green--shade -
Green -- Light $color-green--light -
Green -- Gradient $color-green--gradient -
Green -- Radial $color-green--radial -
Red $color-red $color-error
Red -- Shade $color-red--dark -
Red -- Light $color-red--light -
Red -- Gradient $color-red--gradient -
Orange $color-orange $color-heading
Orange -- Light $color-orange--light -

Iconen

Compleet overzicht van alle iconen.

iconen
icon-co2 $icon-co2
icon-image-indent-left $icon-image-indent-left
icon-group $icon-group
icon-nuclear $icon-nuclear
icon-person-flag $icon-person-flag
icon-power $icon-power
icon-revenue $icon-revenue
icon-sun $icon-sun
icon-visitors $icon-visitors
icon-wind $icon-wind
icon-helmet $icon-helmet
icon-info-circle $icon-info-circle
icon-refresh $icon-refresh
icon-quote $icon-quote
icon-shape-top-left $icon-shape-top-left
icon-shape-top-right $icon-shape-top-right
icon-nedbase $icon-nedbase
icon-arrow-narrow-down-right $icon-arrow-narrow-down-right
icon-arrow-narrow-up-right $icon-arrow-narrow-up-right
icon-arrow-right $icon-arrow-right
icon-arrow-left $icon-arrow-left
icon-arrow-up $icon-arrow-up
icon-arrow-down $icon-arrow-down
icon-chevron-down-thick $icon-chevron-down-thick
icon-chevron-right $icon-chevron-right
icon-chevron-left $icon-chevron-left
icon-chevron-up $icon-chevron-up
icon-chevron-down $icon-chevron-down
icon-alert $icon-alert
icon-file-download $icon-file-download
icon-download $icon-download
icon-play-diap $icon-play-diap
icon-grid $icon-grid
icon-home $icon-home
icon-atom $icon-atom
icon-powerplant $icon-powerplant
icon-windenergy $icon-windenergy
icon-solarenergy $icon-solarenergy
icon-mail $icon-mail
icon-messaging $icon-messaging
icon-phone $icon-phone
icon-play $icon-play
icon-plus $icon-plus
icon-search $icon-search
icon-share $icon-share
icon-truck $icon-truck
icon-user-tag $icon-user-tag
icon-user $icon-user
icon-close $icon-close
icon-zoom-in $icon-zoom-in
icon-x $icon-x
icon-star $icon-star
icon-pin $icon-pin
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-hamburger $icon-hamburger
icon-calendar $icon-calendar
icon-cart $icon-cart
icon-minus $icon-minus
icon-checkmark $icon-checkmark

Barlow

Barlow-700 - 700

Open Sans

Open-Sans-400 - 400

Open-Sans-400 - 600

Open-Sans-700 - 700

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Unordered list

  • Order list item 1
  • Item 1
  • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    • Sub item 1
    • Sub item 2
  • Last item

Ordered list

  1. Ordered list item 1
  2. Item 1
  3. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    1. Sub item 1
    2. Sub item 2
  4. Last item

Heading 3

With some lorem ipsum enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Tags
Default tag
buttons

Links

link link ghost link ghost-primary link ghost-primary-diap link ghost-secondary link text

Links with an icon

link link ghost link ghost-primary link ghost-primary-diap link ghost-secondary link text

Buttons

Buttons with an icon

Buttons with an icon and disabled

button-tag link

link link ghost

button-tag

button-tag[disabled]

icon-button (button and link)

icon-button--small (button and link)

icon-button[disabled] (default and small)

Radio legend

Checkbox legend

All fields test form

Single line text description
Paragraph Text description
Max. bestandsgrootte: 31 MB.
Drop down description
Number description
Checkboxes label(Vereist)
Checkboxes description
Radio buttons label(Vereist)

Radio buttons description
HTML Block content
MM slash DD slash JJJJ

Section Break label

Section Break description
Deze site wordt beschermd door reCAPTCHA en het Google Privacybeleid en er zijn Servicevoorwaarden van toepassing.
Titel card
Afbeelding wordt geladen

Waar bent u naar op zoek?