Code gekopieerd

Kleuren

Compleet overzicht van alle kleuren.

$color-black

#000000

copy
$color-black

$color-gray

#6b6b6b

copy
$color-gray

$color-gray-light

#d9d9d9

copy
$color-gray-light

$color-gray-shade

#f7f7f7

copy
$color-gray-shade

$color-white

#ffffff

copy
$color-white

$color-orange

#EC6608

copy
$color-orange

$color-yellow

#F4B507

copy
$color-yellow

$color-green

#3AA935

copy
$color-green

$color-blue

#008FC2

copy
$color-blue

$color-blue-shade

#D6E8EC

copy
$color-blue-shade

$color-primary

#008FC2

copy
$color-primary

$color-secondary

#F4B507

copy
$color-secondary

$color-body

#000000

copy
$color-body

$color-border

#D6E8EC

copy
$color-border

$color-error

#F4B507

copy
$color-error

Opmaak

Een overzicht van alle opmaak types.

H1 Heading - 600

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H2 Heading - 700

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H3 Heading - 600

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H4 Heading - 600

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H5 Heading - 500
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
H6 Heading - 600
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Platte tekst

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.

Introtekst

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

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
  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

De complete button-set die je binnen dit project kan gebruiken.

Standaard
Button copy
Paars
Button copy
Blauw
Button copy
Geel
Button copy

Box

Box met verschillende modifiers voor o.a. afbeelding naast de content en andere box-kleuren.

.box .box__pretitle .box__title .box__content .box--landscape .box--reversed .box--primary .box--black
Box pretitle 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?
Button
Box pretitle 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?
Button
Box pretitle 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?
Button
Box pretitle 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?
Button
Box pretitle 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?
Button