Code gekopieerd

Kleuren

Compleet overzicht van alle kleuren.

$color-black

#000000

copy
$color-black

$color-gray

#444444

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

#CDEAE6

copy
$color-gainsboro

$color-beaublue

#B8CFDA

copy
$color-beaublue

$color-apricot

#FED0B2

copy
$color-apricot

$color-almond

#F7D5CC

copy
$color-almond

$color-seashell

#FAF4ED

copy
$color-seashell

$color-outerspace

#444444

copy
$color-outerspace

$color-darkgray

#B0ADAD

copy
$color-darkgray

$color-snow

#FAFAFA

copy
$color-snow

$color-red

#e2613e

copy
$color-red

$color-primary

#CDEAE6

copy
$color-primary

$color-secondary

#B8CFDA

copy
$color-secondary

$color-body

#000000

copy
$color-body

$color-border

#d9d9d9

copy
$color-border

$color-error

#e2613e

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