SVRZ SVRZ Menu
SVRZ
Zoek Menu
HomeStyleguide

Styleguide

Lees meer
Code gekopieerd

Containers

Compleet overzicht van alle containers.

no-container - width: 100%;
layout-container - margin: 0 5%;
story-container - margin: 0 10% 0 15%;
content-container - margin: 0 15%;

Columns

Compleet overzicht van alle columns. De lijst laat alleen de eerste 10 columns zien.

Column-1 - 5%;
Column-2 - 10%;
Column-3 - 15%;
Column-4 - 20%;
Column-5 - 25%;
Column-6 - 30%;
Column-7 - 35%;
Column-8 - 40%;
Column-9 - 45%;
Column-10 - 50%;

Kleuren

Compleet overzicht van alle kleuren.

Zwart

$color-black $color-body

Wit

$color-white

Roze

$color-pink $color-primary

Roze - Licht

$color-pink-light

Roze - Schaduw

$color-pink-shade

Groen

$color-green

Groen - Licht

$color-green-light

Blauw

$color-blue $color-secondary

Blauw - Licht

$color-blue-light

Oranje

$color-orange

Oranje - Licht

$color-orange-light

Oranje - Schaduw

$color-orange-shade

Oranje - Vaag

$color-orange-vague

Icons

De complete icon set die je binnen dit project kan gebruiken.

Wordpress Basis
  • icon-home e901
  • icon-phone_iphone e908
  • icon-youtube e902
  • icon-location e907
  • icon-phone e909
  • icon-envelope e90a
  • icon-up e655
  • icon-right e64d
  • icon-down e654
  • icon-left e64c
  • icon-arrow-up e903
  • icon-arrow-right e904
  • icon-arrow-down e905
  • icon-arrow-left e906
  • icon-plus e656
  • icon-minus e652
  • icon-list e60c
  • icon-search e653
  • icon-facebook e661
  • icon-twitter e65f
  • icon-linkedin e666
  • icon-instagram e900
SVRZ
  • icon-svrz-plus e911
  • icon-svrz-arrow-down--small e910
  • icon-svrz-arrow-up--small e91f
  • icon-svrz-arrow-left--small e91d
  • icon-svrz-arrow-right--small e90b
  • icon-svrz-arrow-right--large e91b
  • icon-svrz-arrow-left e90e
  • icon-svrz-arrow-right e90f
  • icon-svrz-error e92c
  • icon-svrz-overview e90d
  • icon-svrz-search e90c
  • icon-svrz-chevron-down e912
  • icon-svrz-check e913
  • icon-svrz-calendar e914
  • icon-svrz-pin e915
  • icon-svrz-popup e916
  • icon-svrz-scroll e917
  • icon-svrz-mail e918
  • icon-svrz-phone e919
  • icon-svrz-close e91a
  • icon-svrz-pdf e91c

Typography

Een overzicht van alle typography types.

Headings
H1 Heading - 800 - 58px

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H2 Heading - 800 - 36px

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H3 Heading - 800 - 24px

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H4 Heading - 800 - 20px

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

H5 Heading - 800 - 18px
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
H6 Heading - 800 - 18px
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Tekst
Platte tekst - 200 - 18px

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.

Introductie
Introtekst - 200 italic - 20px

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
Quote - 700 - 36px

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Opsomming
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
Normaal
Normale link
Focus
Normale link
Hover
Normale link
Visited
Normale link
Texteditor
Normaal
Texteditor link
Focus
Texteditor link
Hover
Texteditor link
Visited
Texteditor link

Label

De complete label set die je binnen dit project kan gebruiken.

Normaal
Standaard
label
Featured
Standaard
label featured

Navigation

De complete navigation set die je binnen dit project kan gebruiken.

Normaal
Standaard
Topbar
Standaard
Footer
Standaard

Buttons

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

Normaal
Standaard / Primary
Button
Secondary
Button
Orange
Button
Pills
Standaard / Orange
Pill Pill - Active
Primary
Pill Pill - Active
Secondary
Pill Pill - Active
Green
Pill Pill - Active
Search
Standaard
Zoek
Overview
Standaard
Arrows
Standaard / Links
Rechts

Read-more

De complete read-more link set die je binnen dit project kan gebruiken.

Normaal
Standaard / Primary
Read-more
Secondary
Read-more
Orange
Read-more
Arrow down
Standaard / Primary
Read-more arrow down
Secondary
Read-more arrow down
Orange
Read-more arrow down
Plus
Standaard / Primary
Read-more plus
Secondary
Read-more plus
Orange
Read-more plus

Social Media

De complete social media set die je binnen dit project kan gebruiken.

Normaal
Standaard / Primary

Formulier

De complete formulier velden set die je binnen dit project kan gebruiken.

Normaal

Contactformulier

  • Max. bestandsgrootte: 32 MB.
  • Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.

Map

De complete map set die je binnen dit project kan gebruiken.

Boxen

De complete box set die je binnen dit project kan gebruiken.

Normaal
Standaard - Wit
Primary - Pink
Secondary - Blue
Green
Orange
Orange - Schaduw
Transparent
Rounded
Standaard

FAQ

De complete FAQ lijst set die je binnen dit project kan gebruiken.

Standaard

  • Locaties

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

  • SVRZ Servicecentrum

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Company

De complete company set die je binnen dit project kan gebruiken.

Standaard
SVRZ Servicecentrum balie
Kunnen wij u helpen? 0900 - 78 79 777 Maandag t/m vrijdag 09.00 - 17.00 uur
Liever per mail? Contactformulier
Zorg aanvragen? Veelgestelde vragen
Transparent
SVRZ Servicecentrum balie
Kunnen wij u helpen? 0900 - 78 79 777 Maandag t/m vrijdag 09.00 - 17.00 uur
Liever per mail? Contactformulier
Zorg aanvragen? Veelgestelde vragen

Story

De complete verhaal set die je binnen dit project kan gebruiken.

Tabs

De complete tabs set die je binnen dit project kan gebruiken.

Standaard

Tabblad 1

Dit is de inhoud van tabblad 1.

Tabblad 2

Dit is de inhoud van tabblad 2.

Agenda

De complete agenda set die je binnen dit project kan gebruiken.

Datum
Standaard
28 sep
Featured
28 sep
Meta
Locatie
Datum
Datum
Datum

Standaard / list

Featured

Locatie

De complete locatie set die je binnen dit project kan gebruiken.

Standaard

Zonder afbeelding

Pagina content

De complete pagina content set die je binnen dit project kan gebruiken.


Standaard
DIt is een gallerij met captions!

Test van titel

Normale tekst

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.

Tekst uitgebreid

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.

Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia.

Over ons
Cliënt met medewerkster op strand
Cliënt met medewerkster op strand

Tekst met afbeelding - links

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Over ons
Cliënt met medewerkster op strand

Tekst met afbeelding - rechts

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Over ons
Label

Titel

Cliënt met medewerkster op strand
SVRZ medewerksters met fiets
Cliënten lezen de krant
Cliënten met hondje bij de balie
Cliënt en verkoopster
‘Door de kleinschaligheid hebben de
 zorgmedewerkers alle aandacht voor 
 de cliënten’
Auteur

Links blok

Label

Informatie blok titel

  • Header 1

    Content 1

  • Header 2

    Content 2

Zoek
Goedemiddag, hoe kunnen wij u helpen?