FCO Security

Styleguide

Code gekopieerd

Kleuren

Compleet overzicht van alle kleuren.

$color-black

#2e2e2e

copy
$color-black

$color-gray

#3D3D3F

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

#66cc00

copy
$color-green

$color-orange

#e45e21

copy
$color-orange

$color-primary

#66cc00

copy
$color-primary

$color-secondary

#3D3D3F

copy
$color-secondary

$color-body

#2e2e2e

copy
$color-body

$color-border

#d9d9d9

copy
$color-border

$color-error

#e45e21

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

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