Zorggroep Ter Weel
HomeStyleguide

Styleguide

Code gekopieerd

Kleuren

Compleet overzicht van alle kleuren.

$color-black

#21181c

copy
$color-black

$color-gray-dark

#494949

copy
$color-gray-dark

$color-gray-er

#838383

copy
$color-gray-er

$color-gray

#EDE9E9

copy
$color-gray

$color-gray-light

#D8D8D8

copy
$color-gray-light

$color-gray-shade

#C6C6C6

copy
$color-gray-shade

$color-white-dark

#f7f7f7

copy
$color-white-dark

$color-white

#ffffff

copy
$color-white

$color-pink

#c80065

copy
$color-pink

$color-pink-light

#FCF1F6

copy
$color-pink-light

$color-yellow

#ffc001

copy
$color-yellow

$color-yellow-light

rgba($color-yellow, .1)

copy
$color-yellow-light

$color-primary

#c80065

copy
$color-primary

$color-secondary

#ffc001

copy
$color-secondary

$color-body

#21181c

copy
$color-body

$color-border

#EDE9E9

copy
$color-border

$color-error

#c80065

copy
$color-error

Opmaak

Een overzicht van alle opmaak types.

H1 Heading - 700

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H2 Heading - 700

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H3 Heading - 700

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H4 Heading - 700

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H5 Heading - 700
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
H6 Heading - 700
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
SPAN Label - 600
Sub heading onderdeel aanduiding
P Body - 400

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.

P Intro - 500

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.

BLOCKQUOTE Quote - 700

“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
Read-more
Left
Read more
Right
Read more
Black
Read more

Buttons

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

Standaard - Yellow (Primary)
Button copy
Secondary - Pink
Button copy

Icon-labels

Gebruik de icomoon icon class om een icoon te gebruiken

Icon-label

Box

Box met verschillende modifiers voor o.a. afbeelding en kleuren.

Box - Normal
Box - Primary
Box - Secondary
Box - Gray
Box - Transparent
Box - Image
Box - Shadow