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
--color-palette-red: #d62410;
--color-palette-red-dark: #a91c09;
--color-palette-blue: #057aba;
--color-palette-blue-dark: #035688;
--color-palette-blue-light: #f2f7fb;
--color-palette-black: #101920;
--color-palette-white: #fff;
--color-palette-gray-light: #f7f7f8;
--color-palette-gray-medium: #ededed;
--color-palette-gray-dark: #e0e0e0;
--color-palette-gray-darker: #383838;
--color-palette-gray-45to1: #6e6e6e;
--color-palette-gray-3to1: #8c8c8c;
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, link in lopende tekst andere website. nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
Knoppen
Citaat
Lorem ipsum dolor sit amet, consectetuer link in lopende tekst adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Voornaam Achternaam
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.
Lijsten met extra stijlen
- Lijst item 1
- Lijst item met een link erachter
- Lijst item met een link erachter naar een andere website
- Lijst item met een link erachter naar een andere website die wat langer is dan normaal
Iconenlijst
Afbeeldingen
![](https://gemeente.leiden.nl/wp-content/uploads/2023/12/home-1024x761.jpeg)
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.
![](https://gemeente.leiden.nl/wp-content/uploads/2023/12/home-1024x761.jpeg)
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.
![](https://gemeente.leiden.nl/wp-content/uploads/2023/12/home-1024x761.jpeg)
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.
![](https://gemeente.leiden.nl/wp-content/uploads/2023/12/home.jpeg)
Omslagafbeelding
Galerij
![](https://gemeente.leiden.nl/wp-content/uploads/2024/01/BGM_23_close_up_met_keten-937x1024.jpg)
![](https://gemeente.leiden.nl/wp-content/uploads/2024/01/BGM-028_staand_zonder_ambtsketen-683x1024.jpg)
![](https://gemeente.leiden.nl/wp-content/uploads/2024/01/Burgemeester_van_der_velden_staand_met_keten-683x1024.jpg)
![](https://gemeente.leiden.nl/wp-content/uploads/2024/01/Abdelhaq_Jermoumi_portret_1-732x1024.jpg)
![](https://gemeente.leiden.nl/wp-content/uploads/2024/01/Abdelhaq_Jermoumi_portret_3-768x1024.jpg)
Groep met automatische achtergrond
Meld je aan
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.
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
Uitklap element content
Uitklap element content
Uitklap element content