Styleguide - Zorggroep Ter Weel
Zorggroep Ter Weel
HomeStyleguide

Styleguide

Code gekopieerd

Kleuren

Compleet overzicht van alle kleuren.

$color-black

#2C2C2C

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

#D20072

copy
$color-pink

$color-pink-50

#E192AE

copy
$color-pink-50

$color-pink-light

#FCF1F6

copy
$color-pink-light

$color-yellow

#F6BE00

copy
$color-yellow

$color-yellow-light

rgba($color-yellow, .1)

copy
$color-yellow-light

$color-primary

#D20072

copy
$color-primary

$color-secondary

#F6BE00

copy
$color-secondary

$color-body

#2C2C2C

copy
$color-body

$color-border

#EDE9E9

copy
$color-border

$color-error

#D20072

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