system: You are an assistant that generates WordPress patterns.

user: Het stijlgids patroon bevat de standaard blokken en voorbeeld kleurbehandelingen voor het maken van een stijlgids pagina op je website. Dit patroon is een gemakkelijke manier om de standaard koptekst, tekst, knop, citaat en voorbeeld afbeelding cover inhoud toe te voegen aan een website die je aan het stylen bent.

assistant: <!-- wp:paragraph -->
<p>Het stijlgids patroon bevat de standaard blokken en voorbeeld kleurbehandelingen voor het maken van een stijlgids pagina op je website. Dit patroon is een eenvoudige manier om de standaard kopteksten, citaat, knoppen, citaten en afbeelding cover inhoud toe te voegen aan de inhoud van een website die je aan het stylen bent. Lever de stijlgids bij de website van een klant voor eenvoudige referentie en naleving van het ontwerp.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Typografie</h2>
<!-- /wp:heading -->

<!-- wp:separator {"align":"wide","className":"is-style-wide"} -->
<hr class="wp-block-separator alignwide has-alpha-channel-opacity is-style-wide" />
<!-- /wp:separator -->

<!-- wp:heading {"level":1} -->
<h1>Koptekst 1</h1>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2>Koptekst 2</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3>Koptekst 3</h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":4} -->
<h4>Koptekst 4</h4>
<!-- /wp:heading -->

<!-- wp:heading {"level":5} -->
<h5>Koptekst 5</h5>
<!-- /wp:heading -->

<!-- wp:heading {"level":6} -->
<h6>Koptekst 6</h6>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong>Paragraaf</strong> <em>typografie</em>. <span style="text-decoration: underline">Heb je dat gehoord?</span> Ze hebben de hoofdreactor stilgelegd. We zullen zeker vernietigd worden. Dit is waanzin! We zijn verdoemd! Er zal deze keer geen ontsnappen aan de prinses zijn. Wat is dat? R2! R2-Detoo, waar ben je? Eindelijk! Waar ben je geweest? Ze komen deze kant op. Wat gaan we doen? We worden naar de specerijen mijn van Kessel gestuurd of in wie weet wat vermorzeld!</p>
<!-- /wp:paragraph -->

<!-- wp:separator {"align":"wide","className":"is-style-wide"} -->
<hr class="wp-block-separator alignwide has-alpha-channel-opacity is-style-wide" />
<!-- /wp:separator -->

<!-- wp:heading -->
<h2>Kleuren</h2>
<!-- /wp:heading -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:cover {"overlayColor":"black","minHeight":180,"minHeightUnit":"px"} -->
<div class="wp-block-cover" style="min-height:180px"><span aria-hidden="true" class="wp-block-cover__background has-black-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Schrijf titel...","fontSize":"small"} -->
<p class="has-text-align-center has-small-font-size">#000000</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:cover {"overlayColor":"cyan-bluish-gray","minHeight":180,"minHeightUnit":"px","isDark":false} -->
<div class="wp-block-cover is-light" style="min-height:180px"><span aria-hidden="true" class="wp-block-cover__background has-cyan-bluish-gray-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Schrijf titel...","textColor":"black","fontSize":"small"} -->
<p class="has-text-align-center has-black-color has-text-color has-small-font-size">#ABB8C3</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:cover {"overlayColor":"vivid-cyan-blue","minHeight":180,"minHeightUnit":"px"} -->
<div class="wp-block-cover" style="min-height:180px"><span aria-hidden="true" class="wp-block-cover__background has-vivid-cyan-blue-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Schrijf titel...","textColor":"black","fontSize":"small"} -->
<p class="has-text-align-center has-black-color has-text-color has-small-font-size">#0693E3</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:cover {"overlayColor":"pale-cyan-blue","minHeight":180,"minHeightUnit":"px","isDark":false} -->
<div class="wp-block-cover is-light" style="min-height:180px"><span aria-hidden="true" class="wp-block-cover__background has-pale-cyan-blue-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Schrijf titel...","textColor":"black","fontSize":"small"} -->
<p class="has-text-align-center has-black-color has-text-color has-small-font-size">#8ED1FC</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:separator {"align":"wide","className":"is-style-wide"} -->
<hr class="wp-block-separator alignwide has-alpha-channel-opacity is-style-wide" />
<!-- /wp:separator -->

<!-- wp:heading -->
<h2>Knoppen</h2>
<!-- /wp:heading -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Solide knop</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">Knop hoofdlijn</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"width":25} -->
<div class="wp-block-button has-custom-width wp-block-button__width-25"><a class="wp-block-button__link wp-element-button">Knop 25%</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"width":50} -->
<div class="wp-block-button has-custom-width wp-block-button__width-50"><a class="wp-block-button__link wp-element-button">Knop 50%</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"width":75} -->
<div class="wp-block-button has-custom-width wp-block-button__width-75"><a class="wp-block-button__link wp-element-button">Knop 75%</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"width":100} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link wp-element-button">Knop 100%</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:separator {"align":"wide","className":"is-style-wide"} -->
<hr class="wp-block-separator alignwide has-alpha-channel-opacity is-style-wide" />
<!-- /wp:separator -->

<!-- wp:heading -->
<h2>citaten</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong>Standaard citaat</strong></p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>Jouw lot ligt bij mij, Skywalker. Obi-Wan wist dat dit waar was. Nee! Te gemakkelijk. Misschien ben je niet zo sterk als de Keizer dacht. Indrukwekkend... Zeer indrukwekkend. Obi-Wan heeft je goed opgeleid. Je hebt je angst onder controle.</p><cite>Darth Vader</cite></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p><strong>Plat citaat</strong></p>
<!-- /wp:paragraph -->

<!-- wp:quote {"className":"is-style-plain"} -->
<blockquote class="wp-block-quote is-style-plain"><p>Jouw lot ligt bij mij, Skywalker. Obi-Wan wist dat dit waar was. Nee! Te gemakkelijk. Misschien ben je niet zo sterk als de Keizer dacht. Indrukwekkend... Zeer indrukwekkend. Obi-Wan heeft je goed opgeleid. Je hebt je angst onder controle.</p><cite>Darth Vader</cite></blockquote>
<!-- /wp:quote -->

<!-- wp:separator {"align":"wide","className":"is-style-wide"} -->
<hr class="wp-block-separator alignwide has-alpha-channel-opacity is-style-wide" />
<!-- /wp:separator -->

<!-- wp:heading -->
<h2>Pullquotes</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Citaten die tussen tekstblokken kunnen worden geplaatst of er links of rechts naast.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Pullquote zonder uitlijning.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:pullquote -->
<figure class="wp-block-pullquote"><blockquote><p><strong>Obi-Wan wist dat dit waar was. </strong></p><cite>Darth Vader</cite></blockquote></figure>
<!-- /wp:pullquote -->

<!-- wp:paragraph -->
<p><strong>Pullquote met brede uitlijning.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:pullquote {"align":"wide"} -->
<figure class="wp-block-pullquote alignwide"><blockquote><p><strong>Nee! Allemaal te gemakkelijk. Misschien ben je niet zo sterk als de Keizer dacht.</strong></p><cite>Darth Vader</cite></blockquote></figure>
<!-- /wp:pullquote -->

<!-- wp:paragraph -->
<p><strong>Pullquote met uitlijning over de gehele breedte</strong></p>
<!-- /wp:paragraph -->

<!-- wp:pullquote {"align":"full"} -->
<figure class="wp-block-pullquote alignfull"><blockquote><p><strong>Indrukwekkend...zeer indrukwekkend. Obi-Wan heeft je goed onderwezen. Je hebt je angst onder controle.</strong></p></blockquote></figure>
<!-- /wp:pullquote -->

<!-- wp:paragraph -->
<p><strong>Pullquote met links en rechts uitlijning.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Heb je dat gehoord? Ze hebben de hoofdreactor stilgelegd. We zullen zeker vernietigd worden. Dit is waanzin! we zijn verdoemd! er zal deze keer geen ontsnappen aan de prinses zijn. wat is dat? R2! R2-Detoo, waar ben je? Eindelijk! Waar ben je geweest? Ze komen deze kant op.</p>
<!-- /wp:paragraph -->

<!-- wp:pullquote {"textAlign":"left","align":"left"} -->
<figure class="wp-block-pullquote alignleft has-text-align-left"><blockquote><p>Jouw lot ligt bij mij, Skywalker.</p><cite>Darth Vader, links uitgelijnde pullquote</cite></blockquote></figure>
<!-- /wp:pullquote -->

<!-- wp:paragraph -->
<p>Ik moet hem alleen onder ogen komen. Chewie! Ga achter me staan! Ga achter me staan! Zo kan ik er niet uit. Het lijkt erop dat je onze enige ontsnappingsroute hebt afgesneden. Misschien wil je het terug in je cel, Uwe Hoogheid.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Ben je gek? Met de snelheid die ze krijgen. Door de hyperruimte reizen is niet zoals gewassen afstoffen, jongen! Zonder precieze berekeningen kunnen we door een ster vliegen of te dicht bij een supernova komen en dat zou je reis snel beëindigen, nietwaar? Wat is dat knipperen? We verliezen ons deflectorschild. Maak je vast, ik ga de sprong naar lichtsnelheid maken. We zijn het Alderaan systeem binnengegaan.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Red Leader, we zijn recht boven je. Draai naar de punt. Oh-vijf, we dekken je. Blijf daar. Ik heb net mijn stuurboord motor verloren. Maak je klaar om aan te vallen. Biggs, Wedge, laten we het afmaken.</p>
<!-- /wp:paragraph -->

<!-- wp:pullquote {"textAlign":"left","align":"right"} -->
<figure class="wp-block-pullquote alignright has-text-align-left"><blockquote><p>Jouw lot ligt bij mij, Skywalker.</p><cite>Darth Vader, rechts uitgelijnde pullquote</cite></blockquote></figure>
<!-- /wp:pullquote -->

<!-- wp:paragraph -->
<p>Je wilt toch niet dat mijn leven saai wordt, of wel? Luke, de Kracht zal met je zijn. Alle vleugels melden zich. Red Ten staat klaar. Red Seven staat klaar. Red Three staat klaar. Red Six staat klaar. Red Nine staat klaar.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Hou de helft van je groep buiten bereik voor de volgende ronde. Begrepen, Basis Eén. Luke, neem Red Two &amp; Three. Blijf hier en wacht op mijn teken... om je aanval te beginnen.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Zij is degene in het bericht... We moeten haar helpen. Nou, kijk, krijg geen rare ideeën. De oude man wil dat we hier wachten.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Waar ga je heen? Nou, ik ga niet die kant op. Het is veel te rotsachtig. Deze weg is veel makkelijker. Waarom denk je dat daar nederzettingen zijn? Doe niet zo technisch. Welke missie? Waar heb je het over? Ik heb zo'n beetje genoeg van je! Ga die kant op. Binnen een dag ben je defect, jij bijziende schroothoop! En laat me je niet betrappen dat je me om hulp smeekt, want die krijg je niet. Geen avonturen meer.</p>
<!-- /wp:paragraph -->

<!-- wp:separator {"align":"wide","className":"is-style-wide"} -->
<hr class="wp-block-separator alignwide has-alpha-channel-opacity is-style-wide" />
<!-- /wp:separator -->

<!-- wp:heading -->
<h2>Voorbeeld tekst en kleur behandeling</h2>
<!-- /wp:heading -->

<!-- wp:cover {"url":"https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/pd36-2-pia11735_orig.jpg?w=1200&h=1200&fit=clip&crop=default&dpr=1&q=75&vib=3&con=3&usm=15&cs=srgb&bg=F4F4F3&ixlib=js-2.2.1&s=44e5721d038ddca51c84b8ff96099368","id":null,"dimRatio":60,"focalPoint":{"x":"0.37","y":"0.47"},"minHeight":596,"minHeightUnit":"px","customGradient":"linear-gradient(135deg,rgb(2,3,129) 49%,rgb(40,116,252) 100%)","contentPosition":"bottom left","align":"full","style":{"spacing":{"padding":{"top":"80px","right":"80px","bottom":"20px","left":"80px"}}}} -->
<div class="wp-block-cover alignfull has-custom-content-position is-position-bottom-left" style="padding-top:80px;padding-right:80px;padding-bottom:20px;padding-left:80px;min-height:596px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-60 has-background-dim wp-block-cover__gradient-background has-background-gradient" style="background:linear-gradient(135deg,rgb(2,3,129) 49%,rgb(40,116,252) 100%)"></span><img class="wp-block-cover__image-background" alt="" src="https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/pd36-2-pia11735_orig.jpg?w=1200&amp;h=1200&amp;fit=clip&amp;crop=default&amp;dpr=1&amp;q=75&amp;vib=3&amp;con=3&amp;usm=15&amp;cs=srgb&amp;bg=F4F4F3&amp;ixlib=js-2.2.1&amp;s=44e5721d038ddca51c84b8ff96099368" style="object-position:37% 47%" data-object-fit="cover" data-object-position="37% 47%" /><div class="wp-block-cover__inner-container"><!-- wp:group {"layout":{"contentSize":"600px"}} -->
<div class="wp-block-group"><!-- wp:heading {"level":5,"textColor":"white","fontSize":"large"} -->
<h5 class="has-white-color has-text-color has-large-font-size">Categorie of subkoptekst</h5>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2>Een overtuigende kop die lezers je inhoud in trekt.</h2>
<!-- /wp:heading -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"pale-cyan-blue","textColor":"black","className":"is-style-fill"} -->
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-black-color has-pale-cyan-blue-background-color has-text-color has-background wp-element-button">CALL TO ACTION</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->