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 site. Dit patroon is een gemakkelijke manier om de standaard koptekst, tekst, knop, citaat en voorbeeld afbeelding omslag inhoud toe te voegen aan een site 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 site. Dit patroon is een eenvoudige manier om de standaard kopteksten, citaat, knoppen, citaten en afbeelding omslag inhoud toe te voegen aan de inhoud van een site die je aan het stylen bent. Lever de stijlgids bij de site 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? Artoo! Artoo-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">Knop massief</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>aanhalingstekens</h2>
<!-- /wp:heading -->

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

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>Je lot ligt bij mij, skywalker. Obi-Wan wist dat dit waar was. Nee! Allemaal te gemakkelijk. Misschien ben je niet zo sterk als de keizer dacht. Indrukwekkend...zeer indrukwekkend. Obi-Wan heeft het je goed geleerd. Je hebt je angst onder controle.</p><cite>Darth Vader</cite></blockquote>
<!-- /wp:quote -->

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

<!-- wp:quote {"className":"is-style-plain"} -->
<blockquote class="wp-block-quote is-style-plain"><p>Je lot ligt bij mij, skywalker. Obi-Wan wist dat dit waar was. Nee! Allemaal te gemakkelijk. Misschien ben je niet zo sterk als de keizer dacht. Indrukwekkend...zeer indrukwekkend. Obi-Wan heeft het je goed geleerd. 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 zijn jullie 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 volle 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? Artoo! Artoo-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>Je 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 kunnen we 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 hyperspace reizen is niet zoals gewassen afstoffen, jongen! Zonder precieze berekeningen kunnen we door een ster vliegen of te dicht bij een supernova komen en dan is je reis snel voorbij, nietwaar? Wat is dat knipperen? We verliezen ons deflectorschild. Ga je vastmaken, ik ga de sprong naar lichtsnelheid maken. We zijn het Alderaan systeem binnengegaan.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Red leader, we zitten recht boven jou. Draai naar de punt. Oh-vijf, we dekken jou. Blijf daar. Ik heb net mijn stuurboord motor verloren. Maak je klaar om je aanval uit te voeren. Biggs, wedge, laten we het sluiten.</p>
<!-- /wp:paragraph -->

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

<!-- wp:paragraph -->
<p>Je zou niet willen dat mijn leven saai wordt, toch? Luke, de force zal met je zijn. Alle vleugels melden zich. Red ten staat klaar. Red seven staat klaar. Red three staat klaar. Rode zes staat klaar. Rode negen staat klaar.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Hou de helft van je groep buiten bereik voor de volgende run. Begrepen, basis een. Luke, neem red twee en drie. Blijf hier en wacht op mijn teken... Om je aanval te starten.</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 genoeg van jou! Ga die kant op! Binnen een dag ben je defect, je bijziende schroothoop! En laat me je niet betrappen dat je me volgt smekend om hulp, 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 subrubriek</h5>
<!-- /wp:heading -->

<!-- wp:heading -->
<h2>Een overtuigende header 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 -->