Styleguide

Deze styleguide dient als referentie voor welke blokken er beschikbaar zijn. Gebruik deze pagina om huisregels te definiëren voor het gebruik van de variaties van blokken.

Redactionele stijlgids

Wil je de uitgangspunten en praktische tips voor een uniforme uitstraling lezen? Of wil je meer weten over onze schrijfstijl of digitale toegankelijkheid? Bekijk dan de stijlgids.

Kleuren

primary: #008937
secondary: #4d327c

periwinkle: #f3f5f9
athens: #e6eaee
boulder: #6e6e6e - 4.5:1 contrast on body background
graphic: #8c8c8c - 3:1 contrast on body background

Koppen

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraaf

Lorem ipsum dolor sit amet, consectetuer link in lopende tekst 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.

Knoppen

Citaat

De Fusion Gemeente Whitelabel is het starter project van Yard | Digital Agency. Het project bevat onze eigen Yard Blocks waarmee je eenvoudig een website in elkaar zet en heeft alle ‘best practices’ op het gebied van performance en accessibility.

Martin Donk

Uitklap

Uitklap element content

Uitklap element content

Uitklap element content

Afbeeldingen

Afbeelding
Afbeelding rechts uitgelijnd

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

Afbeelding links uitgelijnd

Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cwerkenras 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. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cwerkenras 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.

Omslagafbeelding

Tabel

Header 1Header 2Header 3Header 4
Lorum ipsum dolor ist ametAenean massa. Cum sociis natoque penatibus et magnis dis parturient montesLorum ipsum dolor ist ametLorum ipsum dolor ist amet
Lorum ipsum dolor ist ametLorum ipsum dolor ist ametAenean massa. Cum sociis natoque penatibus Et magnis dis parturient montes
Lorum ipsum dolor ist ametAenean massa. Cum sociis natoque penatibus et magnis dis parturient montesAenean massa. Cum sociis natoque penatibus et magnis dis parturient montesEt magnis dis parturient montes
Tabel met header

Bestand

Iconenlijst

  • E-mailadres
  • Telefoonnummer
  • Website

Iconenlijst met achtergrond

  • E-mailadres
  • Telefoonnummer
  • Website

Iconenlijst twee kolommen

  • E-mailadres
  • Telefoonnummer
  • Website

Lijsten

  • Lijst item 1
  • Lijst item 2
  • Lijst item met lange tekst Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
  • Lijst item 1
  • Lijst item 2
  • Lijst item met lange tekst Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
  1. Lijst item 1
  2. Lijst item 2
  3. Lijst item met lange tekst Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Patronen

Banner

Betekenisvolle H1

Korte inleiding van maximaal 5 regels. Schrijf in actieve tekst: geen kunnen, zullen, zouden, maar korte zinnen in B1. Selecteer het “Raster” blokje en verander bij “Achtergrond” de afbeelding.

Kaarten (vrije invoer) – 1 stuks (horizontaal)

Titel H2

Korte tekst. Let op betekenisvolle linkjes voor de knop: geen ‘Lees meer’ maar ‘Ga naar de website van de Rijksoverheid‘.

Kaarten (vrije invoer) – 2 stuks

Titel H3

Korte inleiding van maximaal 4 regels. Let op betekenisvolle linkjes voor de knop: geen ‘Meer informatie’ maar ‘Ga naar de website van de Rijksoverheid‘.

Titel H3

Korte inleiding van maximaal 4 regels. Let op betekenisvolle linkjes voor de knop: geen ‘Meer informatie’ maar ‘Ga naar de website van de Rijksoverheid‘.

Titel H3

Korte inleiding van maximaal 4 regels. Zet een link achter de titel voor een volledig klikbare kaart.

Titel H3

Korte inleiding van maximaal 4 regels. Zet een link achter de titel voor een volledig klikbare kaart.

Titel H3

Optionele tekst van maximaal drie regels.

  • Één
  • Twee
  • Niet meer dan zeven

Titel H3

Optionele tekst van maximaal drie regels.

  • Één
  • Twee
  • Niet meer dan zeven

Kaarten (vrije invoer) – 3 stuks

Titel H3

Korte inleiding van maximaal 4 regels. Let op betekenisvolle linkjes voor de knop: geen ‘Meer informatie’ maar ‘Ga naar de website van de Rijksoverheid‘.

Titel H3

Korte inleiding van maximaal 4 regels. Let op betekenisvolle linkjes voor de knop: geen ‘Meer informatie’ maar ‘Ga naar de website van de Rijksoverheid‘.

Titel H3

Korte inleiding van maximaal 4 regels. Let op betekenisvolle linkjes voor de knop: geen ‘Meer informatie’ maar ‘Ga naar de website van de Rijksoverheid‘.

Titel H3

Korte inleiding van maximaal 4 regels. Zet een link achter de titel voor een volledig klikbare kaart.

Titel H3

Korte inleiding van maximaal 4 regels. Zet een link achter de titel voor een volledig klikbare kaart.

Titel H3

Korte inleiding van maximaal 4 regels. Zet een link achter de titel voor een volledig klikbare kaart.

Titel H3

Optionele tekst van maximaal drie regels.

  • Één
  • Twee
  • Niet meer dan zeven

Titel H3

Optionele tekst van maximaal drie regels.

  • Één
  • Twee
  • Niet meer dan zeven

Titel H3

Optionele tekst van maximaal drie regels.

  • Één
  • Twee
  • Niet meer dan zeven

Kaarten (data ophalen) – Nieuws

Geen items gevonden

Geen items gevonden

Kaarten (data ophalen) – Medewerkers

Indira Nebruz

Indira Nebruz

Trouwambtenaar
Ton overheid

Ton overheid

Wethouder
Marije Kitselar

Marije Kitselar

Gemeentesecretaris
René Toonen

René Toonen

Trouwambtenaar

Kaarten (data ophalen) – Evenementen

Geen items gevonden