Added CTA builder banner.

Author: pszczesniak

docs/_snippets/getting-started/use-builder.html

@@ -1,72 +1,36 @@
-<div class="builder-cta">
-	<h2 id="ckeditor-5-builder">CKEditor&nbsp;5 Builder</h2>
-
-	<p>
-		In our interactive Builder you can quickly get a taste of CKEditor&nbsp;5. It offers an easy-to-use user interface to help you configure, preview, and download the editor suited to your needs. You can easily select:
-	</p>
-
-	<ul>
-		<li>The editor type.</li>
-		<li>The features you need.</li>
-		<li>Preferred framework (React, Angular, Vue or Vanilla JS).</li>
-		<li>Preferred distribution method.</li>
+<div class="c-banner no-transform">
+	<h2 class="c-banner__headline">Create your own <span class="doc b-text">CKEditor 5</span></h2>
+
+	<p class="c-banner__paragraph">Check out our interactive Builder to quickly get a taste of CKEditor&nbsp;5. It
+		offers an easy-to-use user interface to help you configure, preview, and download the editor suited to your
+		needs.</p>
+
+	<ul class="c-banner__list">
+		<li class="c-banner__list-item">editor type,</li>
+		<li class="c-banner__list-item">the features you need,</li>
+		<li class="c-banner__list-item">the preferred framework (React, Angular, Vue or Vanilla JS),</li>
+		<li class="c-banner__list-item">the preferred distribution method.</li>
 	</ul>
-
-	<p>At the end you get ready-to-use code tailored to your needs!</p>
-
-	<p>
-		<a href="https://ckeditor.com/ckeditor-5/builder?redirect=docs" target="_blank">Check out our interactive Builder</a>
+	<p class="c-banner__paragraph">You get ready-to-use code tailored to your needs!</p>
+	<p class="c-banner__paragraph">
+		<a class="c-button c-button--primary c-button--base c-button--rounded doc"
+			href="https://ckeditor.com/ckeditor-5/builder?redirect=docs" target="_blank" role="link">
+			<span class="c-button__label doc">Check out our interactive Builder</span>
+		</a>
 	</p>
-</div>
-
-<style>
-	.builder-cta {
-		border: 1px solid #ECE6F7;
-		border-left: 4px solid #A183D9;
-		padding: 24px;
-		margin: 32px 0 20px;
-	}
-
-	.builder-cta h2 {
-		padding-top: 0;
-		border: 0;
-	}
 
-	.builder-cta ul {
-		margin: 18px 24px;
-	}
-
-	.builder-cta ul li {
-		list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 16" width="18" height="18" fill="none"><path fill="%236A38C1" fill-rule="evenodd" d="M11.041 14.432a.74.74 0 0 0 .24-.182l3.368-3.569a.763.763 0 0 0 .236-.246.816.816 0 0 0 .074-.678.794.794 0 0 0-.175-.297L11.28 5.75a.742.742 0 0 0-.24-.182.705.705 0 0 0-.824.162.824.824 0 0 0 .019 1.128l2.257 2.392H3.75a.75.75 0 0 0 0 1.5h8.742l-2.257 2.392a.823.823 0 0 0-.019 1.128c.071.075.155.133.247.173a.703.703 0 0 0 .578-.01Z" clip-rule="evenodd"/></svg>');
-		padding-inline-start: 4px;
-	}
-
-	.builder-cta ul li+li {
-		margin-top: 4px;
-	}
-
-	.builder-cta a {
-		display: inline-block;
-		background-color: #6A38C1;
-		color: #FFFFFF;
-		font-weight: bold;
-		text-decoration: none;
-		margin-top: 8px;
-		padding: 8px 16px;
-		border-radius: 6px;
-	}
-
-	.builder-cta a:hover,
-	.builder-cta a:focus {
-		background-color: #5C32A4;
-	}
-
-	.builder-cta a::after {
-		content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 15" width="18" height="18" fill="none"><path fill="white" d="M8.765 14.566a.75.75 0 1 1-1.06-1.06l3.005-3.007-3.005-3.005a.75.75 0 1 1 1.06-1.06l3.55 3.55a.75.75 0 0 1-.136 1.168l-3.414 3.414Z"/></svg>');
-		padding-inline-start: 4px;
-	}
-
-	.builder-cta p:last-child {
-		margin-bottom: 0;
-	}
-</style>
+	<svg viewBox="0 0 312 237" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" width="312" height="237"
+		class="c-banner__background-image">
+		<path
+			d="M218.882 509.641L250.008 491.496L281.133 473.352L343.385 437.062L374.511 418.917L436.762 382.628L437.01 382.483L437.01 127.884L436.762 127.739L405.636 109.594L374.511 91.4492L281.133 37.0156L274.988 33.4336L218.882 0.726543L218.63 0.579082L218.378 0.726543L187.253 18.8711L156.127 37.0156L125.002 55.1601L124.754 55.3047L124.754 164.173L94.1289 182.025L63.2539 164.028L63.0019 163.882L62.7509 164.028L0.498996 200.317L0.25095 200.462L0.250953 237.326L0.499 237.471L62.751 273.76L93.6279 291.76L93.6279 436.917L93.876 437.062L156.127 473.352L187.253 491.496L218.378 509.641L218.63 509.787L218.882 509.641ZM188.005 19.5889L218.13 2.02732L218.13 37.1601L188.005 54.7217L188.005 19.5889ZM219.13 2.02732L248.764 19.3027L219.13 36.5771L219.13 2.02732ZM219.624 37.4472L249.756 19.8808L279.889 37.4472L249.756 55.0127L219.624 37.4472ZM156.879 37.7344L187.005 20.1719L187.005 55.3047L156.879 72.8662L156.879 37.7344ZM126.248 55.5918L155.879 38.3174L155.879 72.8652L126.248 55.5918ZM188.499 55.5918L218.13 38.3174L218.13 72.8652L188.499 55.5918ZM219.13 38.3174L248.763 55.5918L219.13 72.8662L219.13 38.3174ZM250.75 55.5918L280.382 38.3174L280.382 72.8662L250.75 55.5918ZM281.382 38.3174L311.015 55.5918L281.382 72.8662L281.382 38.3174ZM125.754 56.4619L155.387 73.7363L125.754 91.0107L125.754 56.4619ZM157.373 73.7363L187.005 56.4619L187.005 91.0107L157.373 73.7363ZM188.005 56.4619L217.638 73.7363L188.005 91.0107L188.005 56.4619ZM219.624 73.7363L249.256 56.4619L249.256 91.0107L219.624 73.7363ZM250.256 56.4619L279.889 73.7363L250.256 91.0107L250.256 56.4619ZM281.875 73.7363L311.508 56.4619L311.508 91.0107L281.875 73.7363ZM312.508 56.4619L342.14 73.7363L312.508 91.0107L312.508 56.4619ZM156.879 74.6064L186.512 91.8808L156.879 109.155L156.879 74.6064ZM219.13 74.6064L248.763 91.8808L219.13 109.155L219.13 74.6064ZM250.75 91.8808L280.382 74.6064L280.382 109.155L250.75 91.8808ZM281.382 74.6064L311.015 91.8808L281.382 109.155L281.382 74.6064ZM313.001 91.8808L342.633 74.6064L342.633 109.155L313.001 91.8808ZM343.633 74.6064L373.266 91.8808L343.633 109.155L343.633 74.6064ZM126.248 91.8808L155.879 74.6074L155.879 109.155L126.248 91.8808ZM188.499 91.8808L218.13 74.6074L218.13 109.155L188.499 91.8808ZM157.373 110.025L187.505 92.4599L217.637 110.025L187.505 127.592L157.373 110.025ZM125.754 92.751L155.879 110.312L155.879 146.028L125.754 163.59L125.754 92.751ZM219.624 110.025L249.256 92.751L249.256 127.3L219.624 110.025ZM250.256 92.751L279.889 110.025L250.256 127.3L250.256 92.751ZM281.875 110.025L311.508 92.7509L311.508 127.301L281.875 110.025ZM312.508 92.7509L342.14 110.025L312.508 127.3L312.508 92.7509ZM344.127 110.025L373.759 92.7509L373.759 127.3L344.127 110.025ZM374.759 92.7509L404.391 110.025L374.759 127.3L374.759 92.7509ZM156.879 110.895L186.512 128.17L156.879 145.445L156.879 110.895ZM188.498 128.17L218.13 110.895L218.13 145.445L188.498 128.17ZM219.13 110.895L248.764 128.17L219.13 145.445L219.13 110.895ZM250.749 128.17L280.382 110.895L280.382 145.445L250.749 128.17ZM281.382 110.895L311.015 128.17L281.382 145.445L281.382 110.895ZM313 128.17L342.633 110.895L342.633 145.445L313 128.17ZM343.633 110.895L373.266 128.17L343.633 145.445L343.633 110.895ZM375.252 128.17L404.884 110.895L404.884 145.445L375.252 128.17ZM405.884 110.895L435.518 128.171L405.884 145.445L405.884 110.895ZM187.757 200.317L156.879 182.316L156.879 146.602L187.505 128.749L218.13 146.602L218.13 218.023L187.757 200.317ZM219.623 146.314L249.256 129.04L249.256 163.59L219.623 146.314ZM250.256 129.04L279.89 146.315L250.256 163.59L250.256 129.04ZM281.874 146.315L311.508 129.04L311.508 163.59L281.874 146.315ZM344.126 146.314L373.759 129.04L373.759 163.59L344.126 146.314ZM406.377 146.315L436.01 129.04L436.01 163.59L406.377 146.315ZM312.508 129.041L342.141 146.315L312.508 163.59L312.508 129.041ZM374.759 129.041L404.392 146.315L374.759 163.59L374.759 129.041ZM126.248 164.46L155.879 147.185L155.879 181.733L126.248 164.46ZM219.13 147.185L249.256 164.747L249.256 200.462L219.13 218.023L219.13 147.185ZM250.75 164.46L280.382 147.185L280.382 181.734L250.75 164.46ZM281.382 147.185L311.015 164.46L281.382 181.734L281.382 147.185ZM313.001 164.46L342.633 147.185L342.633 181.734L313.001 164.46ZM343.633 147.185L373.266 164.46L343.633 181.734L343.633 147.185ZM375.253 164.46L404.884 147.185L404.884 181.733L375.253 164.46ZM405.884 147.185L435.517 164.46L405.884 181.734L405.884 147.185ZM1.74509 200.749L62.5019 165.33L62.5019 200.462L31.8769 218.314L1.74509 200.749ZM63.5019 165.33L93.1357 182.604L63.5019 199.879L63.5019 165.33ZM95.122 182.604L124.754 165.33L124.754 199.879L95.122 182.604ZM125.754 165.33L155.387 182.604L125.754 199.879L125.754 165.33ZM250.256 165.33L279.889 182.604L250.256 199.879L250.256 165.33ZM281.875 182.604L311.508 165.33L311.508 199.879L281.875 182.604ZM312.508 165.33L342.141 182.604L312.508 199.879L312.508 165.33ZM344.127 182.604L373.759 165.33L373.759 199.879L344.127 182.604ZM374.759 165.33L404.392 182.604L374.759 199.879L374.759 165.33ZM406.378 182.604L436.01 165.33L436.01 199.879L406.378 182.604ZM63.5019 236.751L63.5019 201.036L94.1289 183.184L125.002 201.182L155.386 218.894L94.1279 254.604L63.5019 236.751ZM126.248 200.749L155.879 183.475L155.879 218.023L126.248 200.749ZM156.879 183.475L186.512 200.749L156.879 218.023L156.879 183.475ZM250.75 200.749L280.382 183.475L280.382 218.023L250.75 200.749ZM281.382 183.475L311.015 200.749L281.382 218.023L281.382 183.475ZM313.001 200.749L342.633 183.475L342.633 218.023L313.001 200.749ZM343.633 183.475L373.266 200.749L343.633 218.023L343.633 183.475ZM405.884 183.475L435.517 200.749L405.884 218.023L405.884 183.475ZM375.253 200.749L404.884 183.476L404.884 218.023L375.253 200.749ZM156.879 254.896L156.879 219.181L187.505 201.328L218.13 219.181L218.13 254.896L187.505 272.749L156.879 254.896ZM1.25095 201.619L30.8838 218.894L1.25095 236.168L1.25095 201.619ZM32.8701 218.894L62.5019 201.619L62.5019 236.168L32.8701 218.894ZM219.624 218.894L249.256 201.619L249.256 236.168L219.624 218.894ZM250.256 201.619L279.889 218.894L250.256 236.168L250.256 201.619ZM281.875 218.894L311.508 201.619L311.508 236.169L281.875 218.894ZM312.508 201.619L342.14 218.894L312.508 236.168L312.508 201.619ZM344.127 218.894L373.759 201.619L373.759 236.168L344.127 218.894ZM374.759 201.619L404.391 218.894L374.759 236.168L374.759 201.619ZM406.378 218.894L436.01 201.619L436.01 236.169L406.378 218.894ZM1.74509 237.038L31.3769 219.764L31.3769 254.313L1.74509 237.038ZM32.3769 254.896L32.3769 219.764L62.5019 237.325L62.5019 272.458L32.3769 254.896ZM95.1211 255.183L155.879 219.764L155.879 254.896L125.254 272.749L95.1211 255.183ZM219.13 219.764L248.764 237.038L219.13 254.313L219.13 219.764ZM250.749 237.038L280.382 219.764L280.382 254.313L250.749 237.038ZM281.382 219.764L311.015 237.038L281.382 254.313L281.382 219.764ZM313 237.038L342.633 219.764L342.633 254.313L313 237.038ZM343.633 219.764L373.266 237.038L343.633 254.313L343.633 219.764ZM375.252 237.038L404.884 219.764L404.884 254.313L375.252 237.038ZM405.884 219.764L435.518 237.039L405.884 254.313L405.884 219.764ZM63.5019 237.908L93.1357 255.184L63.5019 272.458L63.5019 237.908ZM219.623 255.183L249.256 237.908L249.256 272.458L219.623 255.183ZM250.256 237.908L279.89 255.184L250.256 272.458L250.256 237.908ZM281.874 255.184L311.508 237.908L311.508 272.458L281.874 255.184ZM344.126 255.183L373.759 237.908L373.759 272.458L344.126 255.183ZM406.377 255.184L436.01 237.908L436.01 272.458L406.377 255.184ZM312.508 237.909L342.141 255.184L312.508 272.458L312.508 237.909ZM374.759 237.909L404.392 255.184L374.759 272.458L374.759 237.909ZM126.247 273.327L156.38 255.762L186.513 273.328L156.38 290.894L126.247 273.327ZM63.9951 273.328L93.6279 256.053L93.6279 290.603L63.9951 273.328ZM94.6279 291.186L94.6279 256.053L124.754 273.614L124.754 308.747L94.6279 291.186ZM188.498 273.327L218.13 256.053L218.13 290.602L188.498 273.327ZM219.13 256.053L248.764 273.328L219.13 290.603L219.13 256.053ZM250.749 273.327L280.382 256.053L280.382 290.603L250.749 273.327ZM281.382 256.053L311.016 273.328L281.382 290.603L281.382 256.053ZM313 273.328L342.633 256.053L342.633 290.603L313 273.328ZM343.633 256.053L373.267 273.328L343.633 290.603L343.633 256.053ZM375.252 273.327L404.884 256.053L404.884 290.602L375.252 273.327ZM405.884 256.053L435.518 273.328L405.884 290.603L405.884 256.053ZM125.754 274.197L155.387 291.473L125.754 308.747L125.754 274.197ZM157.373 291.473L187.005 274.197L187.005 308.747L157.373 291.473ZM188.005 274.197L217.638 291.473L188.005 308.747L188.005 274.197ZM219.624 291.473L249.256 274.197L249.256 308.747L219.624 291.473ZM250.256 274.197L279.89 291.473L250.256 308.747L250.256 274.197ZM281.875 291.473L311.508 274.197L311.508 308.747L281.875 291.473ZM312.508 274.197L342.141 291.473L312.508 308.747L312.508 274.197ZM344.126 291.473L373.759 274.197L373.759 308.747L344.126 291.473ZM374.759 274.197L404.392 291.473L374.759 308.747L374.759 274.197ZM406.378 291.473L436.01 274.197L436.01 308.747L406.378 291.473ZM125.754 345.619L125.754 309.904L156.38 292.051L187.005 309.904L187.005 345.618L156.379 363.472L125.754 345.619ZM94.6279 292.343L124.261 309.617L94.6279 326.892L94.6279 292.343ZM188.499 309.617L218.13 292.343L218.13 326.892L188.499 309.617ZM219.13 292.343L248.763 309.617L219.13 326.892L219.13 292.343ZM250.75 309.617L280.382 292.343L280.382 326.892L250.75 309.617ZM281.382 292.343L311.015 309.617L281.382 326.892L281.382 292.343ZM313.001 309.617L342.633 292.343L342.633 326.892L313.001 309.617ZM343.633 292.343L373.266 309.617L343.633 326.892L343.633 292.343ZM375.253 309.617L404.884 292.343L404.884 326.892L375.253 309.617ZM405.884 292.343L435.517 309.617L405.884 326.892L405.884 292.343ZM95.1221 327.762L124.754 310.487L124.754 345.036L95.1221 327.762ZM188.005 310.487L217.637 327.762L188.005 345.035L188.005 310.487ZM219.13 363.764L219.13 328.049L249.256 310.487L249.256 381.325L219.13 363.764ZM250.256 381.908L250.256 310.487L280.63 328.194L311.508 346.194L311.508 381.908L280.882 399.762L250.256 381.908ZM281.875 327.762L311.508 310.487L311.508 345.036L281.875 327.762ZM312.508 345.619L312.508 310.487L342.633 328.049L342.633 363.181L312.508 345.619ZM344.127 327.762L373.759 310.487L373.759 345.036L344.127 327.762ZM374.759 310.487L404.391 327.762L374.759 345.035L374.759 310.487ZM406.378 327.762L436.01 310.487L436.01 345.036L406.378 327.762ZM94.6279 363.764L94.6279 328.632L124.754 346.194L124.754 381.325L94.6279 363.764ZM188.005 346.193L218.13 328.632L218.13 363.764L188.005 381.325L188.005 346.193ZM343.633 328.632L373.266 345.906L343.633 363.181L343.633 328.632ZM375.252 345.906L404.884 328.632L404.884 363.181L375.252 345.906ZM405.884 328.632L435.517 345.906L405.884 363.181L405.884 328.632ZM157.373 364.051L187.005 346.776L187.005 381.325L157.373 364.051ZM344.127 364.051L373.759 346.776L373.759 381.325L344.127 364.051ZM406.378 364.051L436.01 346.776L436.01 381.325L406.378 364.051ZM125.754 346.777L155.386 364.051L125.754 381.325L125.754 346.777ZM312.508 346.777L342.14 364.051L312.508 381.325L312.508 346.777ZM374.759 346.777L404.391 364.051L374.759 381.325L374.759 346.777ZM374.759 382.482L405.385 364.63L435.517 382.195L374.759 417.615L374.759 382.482ZM94.6279 364.921L124.754 382.482L124.754 418.198L94.6279 435.76L94.6279 364.921ZM126.248 382.195L155.879 364.921L155.879 399.47L126.248 382.195ZM156.879 364.921L186.512 382.195L156.879 399.47L156.879 364.921ZM188.499 382.195L218.13 364.921L218.13 399.47L188.499 382.195ZM219.13 364.921L248.763 382.195L219.13 399.47L219.13 364.921ZM313.001 382.195L342.633 364.921L342.633 399.47L313.001 382.195ZM343.633 364.921L373.266 382.195L343.633 399.47L343.633 364.921ZM125.754 383.065L155.387 400.34L125.754 417.615L125.754 383.065ZM157.373 400.34L187.005 383.065L187.005 417.615L157.373 400.34ZM188.005 383.065L217.638 400.34L188.005 417.615L188.005 383.065ZM219.624 400.34L249.256 383.065L249.256 417.615L219.624 400.34ZM250.256 383.065L279.89 400.34L250.256 417.615L250.256 383.065ZM281.875 400.34L311.508 383.065L311.508 417.615L281.875 400.34ZM312.508 383.065L342.141 400.34L312.508 417.615L312.508 383.065ZM344.126 400.34L373.759 383.065L373.759 417.615L344.126 400.34ZM250.749 418.485L280.882 400.919L311.016 418.485L280.882 436.051L250.749 418.485ZM156.879 401.21L186.513 418.484L156.879 435.76L156.879 401.21ZM219.13 401.21L248.764 418.484L219.13 435.76L219.13 401.21ZM313 418.485L342.633 401.21L342.633 435.76L313 418.485ZM343.633 401.21L373.267 418.484L343.633 435.76L343.633 401.21ZM126.247 418.485L155.879 401.211L155.879 435.76L126.247 418.485ZM188.498 418.485L218.13 401.211L218.13 435.76L188.498 418.485ZM95.1221 436.63L125.254 419.063L155.386 436.63L125.254 454.195L95.1221 436.63ZM157.373 436.63L187.005 419.354L187.005 453.904L157.373 436.63ZM188.005 419.354L217.637 436.63L188.005 453.903L188.005 419.354ZM219.624 436.63L249.256 419.354L249.256 453.904L219.624 436.63ZM250.256 419.354L279.889 436.63L250.256 453.904L250.256 419.354ZM281.875 436.63L311.508 419.354L311.508 453.904L281.875 436.63ZM312.508 419.354L342.14 436.63L312.508 453.904L312.508 419.354ZM126.247 454.774L155.879 437.5L155.879 472.049L126.247 454.774ZM156.879 437.5L186.512 454.774L156.879 472.049L156.879 437.5ZM188.498 454.774L218.13 437.5L218.13 472.049L188.498 454.774ZM219.13 437.5L248.763 454.774L219.13 472.049L219.13 437.5ZM250.749 454.774L280.382 437.5L280.382 472.049L250.749 454.774ZM281.382 437.5L311.015 454.774L281.382 472.049L281.382 437.5ZM157.373 472.919L187.005 455.645L187.005 490.193L157.373 472.919ZM219.624 472.919L249.256 455.645L249.256 490.193L219.624 472.919ZM250.256 455.645L279.889 472.919L250.256 490.193L250.256 455.645ZM188.005 455.645L217.637 472.919L188.005 490.193L188.005 455.645ZM188.499 491.063L218.631 473.498L248.763 491.063L218.631 508.629L188.499 491.063Z"
+			fill="url(#paint0_linear_2792_9761)"></path>
+		<defs>
+			<linearGradient id="paint0_linear_2792_9761" x1="67.9769" y1="421.931" x2="386.5" y2="121.557"
+				gradientUnits="userSpaceOnUse">
+				<stop offset="0.0336539" stop-color="#B0EB1D"></stop>
+				<stop offset="0.50277" stop-color="#26DBA5"></stop>
+				<stop offset="1" stop-color="#7F00FD"></stop>
+			</linearGradient>
+		</defs>
+	</svg>
+</div>