DNWG

Styleguide

Code gekopieerd

Kleuren

Compleet overzicht van alle kleuren.

$color-black

#000000

copy
$color-black

$color-gray

#3c3c3b

copy
$color-gray

$color-gray-light

#BECAD6

copy
$color-gray-light

$color-gray-shade

#f4f4f4

copy
$color-gray-shade

$color-gray-darkshade

#ACACAC

copy
$color-gray-darkshade

$color-white

#ffffff

copy
$color-white

$color-blue-dark

#003670

copy
$color-blue-dark

$color-blue-light

#019ee3

copy
$color-blue-light

$color-blue-shade

#e8edf0

copy
$color-blue-shade

$color-orange

#f18b01

copy
$color-orange

$color-primary

#003670

copy
$color-primary

$color-secondary

#019ee3

copy
$color-secondary

$color-body

#3c3c3b

copy
$color-body

$color-border

#ACACAC

copy
$color-border

$color-error

#f18b01

copy
$color-error

Opmaak

Een overzicht van alle opmaak types.

H1 Heading - 900

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

Links

Alle link stylen.

Normaal
Normale link
Focus
Normale link
Hover
Normale link
Visited
Normale link

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