VGS
HomeStyleguide

Styleguide

Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Cras justo odio dapibus ac facilisis in egestas eget quam. Morbi leo risus, porta ac consectetur vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Code gekopieerd

Kleuren

Compleet overzicht van alle kleuren.

$color-black

#2B2B2B

copy
$color-black

$color-black-light

#232323

copy
$color-black-light

$color-gray-dark

#727272

copy
$color-gray-dark

$color-gray

#9C9D9D

copy
$color-gray

$color-gray-light

#C9C7C3

copy
$color-gray-light

$color-gray-shade

#DCDCDC

copy
$color-gray-shade

$color-gray-shade-second

#E8E8E8

copy
$color-gray-shade-second

$color-white-dark

#F3F3F3

copy
$color-white-dark

$color-white

#ffffff

copy
$color-white

$color-blue

#2F2483

copy
$color-blue

$color-blue-light

#3955C2

copy
$color-blue-light

$color-blue-shade

#3F70E4

copy
$color-blue-shade

$color-red

#CE1224

copy
$color-red

$color-gradient-blue

linear-gradient(90deg, rgba(63, 111, 228,1) 20.535409413497593%, rgba(62, 110, 227,1) 20.535409413497593%, rgba(54, 65, 170,1) 80.5364136984467%)

copy
$color-gradient-blue

$color-gradient-redblue

linear-gradient(180deg, rgba(206, 18, 36,1) 2.439217758985201%, rgba(205, 18, 36,1) 2.439217758985201%, rgba(47, 36, 131,1) 83.0946088794926%)

copy
$color-gradient-redblue

$color-landing-blue

#1190C6

copy
$color-landing-blue

$color-landing-blue-light

#DEF3FC

copy
$color-landing-blue-light

$color-landing-blue-shade

#5BC5F2

copy
$color-landing-blue-shade

$color-landing-blue-shade

#5BC5F2

copy
$color-landing-blue-shade

$color-landing-blue-dark

#312783

copy
$color-landing-blue-dark

$color-landing-red

#E30613

copy
$color-landing-red

$color-landing-red-dark

#CD0813

copy
$color-landing-red-dark

$color-landing-green

#C0D34C

copy
$color-landing-green

$color-primary

#2F2483

copy
$color-primary

$color-secondary

#CE1224

copy
$color-secondary

$color-body

#232323

copy
$color-body

$color-border

#C9C7C3

copy
$color-border

$color-error

#CE1224

copy
$color-error

$color-landing-primary

#312783

copy
$color-landing-primary

$color-landing-secondary

#E30613

copy
$color-landing-secondary

$color-landing-tertiary

#5BC5F2

copy
$color-landing-tertiary

$color-landing-button

#C0D34C

copy
$color-landing-button

$color-landing-background

#DEF3FC

copy
$color-landing-background

Opmaak

Een overzicht van alle opmaak types.

H1 Heading - 800

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H2 Heading - 800

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H3 Heading - 700

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H4 Heading - 500

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.
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
Rood
Button copy
Blauw
Button copy
Wit
Button copy
Klein
Button copy
Lees meer
Button copy

News list

Lijst met daarin de nieuws items.

Meer nieuws

Submenu list

Lijst met daarin alle submenu items, te vinden op pagina's die ook subpagina's hebben.

Team - slider

Slider waarin alle teamleden worden weergeven

Personeelsmanagement

Team - widget

Widget onderaan pagina's met daarin informatie over een medewerker.

Voor meer informatie

Drs. Gerard Klerk

0180 - 000 000
Bel mij terug E-mail

News box

News box te vinden op de homepage en post archive pagina

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

Event box

Event box te vinden op content pagina's en event archive pagina

11
Dinsdag September
Training Financiën voor (niet financiële) bestuurders en toezichthouders
11
Dinsdag September
Training Financiën voor (niet financiële) bestuurders en toezichthouders
11
Dinsdag September
Training Financiën voor (niet financiële) bestuurders en toezichthouders

Download box

Event box te vinden op de downloads & publicaties archive pagina

Jaarverslag 2017 PDF 28/01/2018
Jaarverslag 2017 PDF 28/01/2018
Jaarverslag 2017 PDF 28/01/2018

Filter

Filter balk die wordt gebruikt op de event en downloads pagina