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.

Kleuren

blue-dark: #037d96;
blue-light: #049fbe;
blue-lighter: #eaf7f7;

concrete: #f0f0f0
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

Jolien van der Kemp

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.

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.

Lijsten met extra stijlen

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

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

Iconenlijst

• E-mailadres
• Telefoonnummer
• Website

Afbeeldingen

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.

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.

Scheidingsteken

---

Tabel

Header 1	Header 2	Header 3	Header 4
Lorum ipsum dolor ist amet	Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes	Lorum ipsum dolor ist amet	Lorum ipsum dolor ist amet
Lorum ipsum dolor ist amet	Lorum ipsum dolor ist amet	Aenean massa. Cum sociis natoque penatibus	Et magnis dis parturient montes
Lorum ipsum dolor ist amet	Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes	Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes	Et magnis dis parturient montes

Bestand

Uitklap blokken