{"id":24,"date":"2025-09-26T08:50:47","date_gmt":"2025-09-26T08:50:47","guid":{"rendered":"https:\/\/ska-blocks.com\/docs\/2025\/09\/26\/message\/"},"modified":"2025-10-31T07:32:52","modified_gmt":"2025-10-31T07:32:52","slug":"message","status":"publish","type":"post","link":"https:\/\/ska-blocks.com\/docs\/message\/","title":{"rendered":"Message"},"content":{"rendered":"\n<p class=\"lead\">Messages are blocks of text that stand out among other content.<\/p>\n\n\n\n<p>The custom Theme palette option in <a href=\"https:\/\/ska-blocks.com\/docs\/ska-blocks\/configuring-tailwind\/\" data-type=\"post\" data-id=\"317\">Tailwind configuration<\/a> contains values for <strong>positive<\/strong>, <strong>negative<\/strong>, <strong>info<\/strong> and <strong>warning<\/strong> colors which can be used to create various messages with appropriate appearances.<\/p>\n\n\n\n<div data-ska-pswp=\"ska-pswp-1\" class=\"flex flex-row gap-3 items-start *:*:m-0! wp-block-ska-lightbox\">\n<a data-pswp-height=\"702\" data-pswp-width=\"268\" href=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-19.png\" class=\"p-1 w-28 rounded-xs ring ring-site wp-block-ska-image image\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-19.png\" alt=\"ska-blocks Tailwind theme colors options\" width=\"268\" height=\"702\" class=\"w-full h-full object-cover rounded-[inherit] aspect-[inherit]\" srcset=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-19.png 268w, https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-19-115x300.png 115w\" sizes=\"(max-width: 268px) 100vw, 268px\" \/><\/a>\n\n\n\n<a data-pswp-height=\"268\" data-pswp-width=\"484\" href=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-20.png\" class=\"inline-block p-2 max-w-56 rounded-xs ring ring-site wp-block-ska-image image\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-20-300x166.png\" alt=\"Tailwind color palette of &quot;positive&quot; colors - default, border, background, heading, text\" width=\"300\" height=\"166\" class=\"w-full h-full object-cover rounded-[inherit] aspect-[inherit]\" srcset=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-20-300x166.png 300w, https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-20.png 484w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\n<\/div>\n\n\n\n<div class=\"mt-4 wp-block-ska-code not-prose ska-preset--ska-theme--code\"><header><span class=\"title\">Assigning positive colors with Tailwind classes<\/span><\/header><div class=\"content\"><pre class=\"code\"><code class=\"\">text-positive-text bg-positive-background border-positive-border<\/code><\/pre><button :class=\"{error: state === &apos;error&apos;, success: state === &apos;success&apos;}\" x-data=\"{state:&apos;&apos;}\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.previousElementSibling.innerText), $el.innerText = `Copied!`, state = &apos;success&apos;) : ($el.innerText = `Can&amp;#039;t copy`, state = &apos;error&apos;)\" class=\"copy\" type=\"button\">Copy<\/button><\/div><\/div>\n\n\n\n<div class=\"wp-block-ska-element\">\n<h2 class=\"wp-block-heading\">Positive message<\/h2>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<p class=\"px-4 py-3 text-base\/none text-positive-text bg-positive-background rounded border border-positive-border\"><strong>Success<\/strong>: this paragraph is a message.<\/p>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:paragraph {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;px-4 py-3 text-base\/none text-positive-text bg-positive-background rounded border border-positive-border&quot;,&quot;css&quot;:&quot;.px-4{padding-inline:var(--spacing-4)}.py-3{padding-block:var(--spacing-3)}.text-base\\u005c\/none{font-size:var(--text-base);line-height:var(--leading-none)}.text-positive-text{color:var(--color-positive-text)}.bg-positive-background{background-color:var(--color-positive-background)}.rounded{border-radius:var(--radius)}.border{border-style:var(--tw-border-style);border-width:1px}.border-positive-border{border-color:var(--color-positive-border)}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;4&quot;,&quot;y&quot;:&quot;3&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;base\/none&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;positive-text&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;positive-background&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksBorderWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksBorderColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;positive-border&quot;}}}} --&gt;\n&lt;p class=&quot;px-4 py-3 text-base\/none text-positive-text bg-positive-background rounded border border-positive-border&quot;&gt;&lt;strong&gt;Success&lt;\/strong&gt;: this paragraph is a message.&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ska-element\">\n<h2 class=\"wp-block-heading\">Info message<\/h2>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<p class=\"px-4 py-3 text-base\/none text-info-text bg-info-background rounded border border-info-border\"><strong>Info<\/strong>: this paragraph is a message.<\/p>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:paragraph {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;px-4 py-3 text-base\/none text-info-text bg-info-background rounded border border-info-border&quot;,&quot;css&quot;:&quot;.px-4{padding-inline:var(--spacing-4)}.py-3{padding-block:var(--spacing-3)}.text-base\\u005c\/none{font-size:var(--text-base);line-height:var(--leading-none)}.text-info-text{color:var(--color-info-text)}.bg-info-background{background-color:var(--color-info-background)}.rounded{border-radius:var(--radius)}.border{border-style:var(--tw-border-style);border-width:1px}.border-info-border{border-color:var(--color-info-border)}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;4&quot;,&quot;y&quot;:&quot;3&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;base\/none&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;info-text&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;info-background&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksBorderWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksBorderColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;info-border&quot;}}}} --&gt;\n&lt;p class=&quot;px-4 py-3 text-base\/none text-info-text bg-info-background rounded border border-info-border&quot;&gt;&lt;strong&gt;Info&lt;\/strong&gt;: this paragraph is a message.&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ska-element\">\n<h2 class=\"wp-block-heading\">Warning message<\/h2>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<p class=\"px-4 py-3 text-base\/none text-warning-text bg-warning-background rounded border border-warning-border\"><strong>Warning<\/strong>: this paragraph is a message.<\/p>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:paragraph {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;px-4 py-3 text-base\/none text-warning-text bg-warning-background rounded border border-warning-border&quot;,&quot;css&quot;:&quot;.px-4{padding-inline:var(--spacing-4)}.py-3{padding-block:var(--spacing-3)}.text-base\\u005c\/none{font-size:var(--text-base);line-height:var(--leading-none)}.text-warning-text{color:var(--color-warning-text)}.bg-warning-background{background-color:var(--color-warning-background)}.rounded{border-radius:var(--radius)}.border{border-style:var(--tw-border-style);border-width:1px}.border-warning-border{border-color:var(--color-warning-border)}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;4&quot;,&quot;y&quot;:&quot;3&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;base\/none&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;warning-text&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;warning-background&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksBorderWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksBorderColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;warning-border&quot;}}}} --&gt;\n&lt;p class=&quot;px-4 py-3 text-base\/none text-warning-text bg-warning-background rounded border border-warning-border&quot;&gt;&lt;strong&gt;Warning&lt;\/strong&gt;: this paragraph is a message.&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ska-element\">\n<h2 class=\"wp-block-heading\">Negative message<\/h2>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<p class=\"px-4 py-3 text-base\/none text-negative-text bg-negative-background rounded border border-negative-border\"><strong>Error<\/strong>: this paragraph is a message.<\/p>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:paragraph {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;px-4 py-3 text-base\/none text-negative-text bg-negative-background rounded border border-negative-border&quot;,&quot;css&quot;:&quot;.px-4{padding-inline:var(--spacing-4)}.py-3{padding-block:var(--spacing-3)}.text-base\\u005c\/none{font-size:var(--text-base);line-height:var(--leading-none)}.text-negative-text{color:var(--color-negative-text)}.bg-negative-background{background-color:var(--color-negative-background)}.rounded{border-radius:var(--radius)}.border{border-style:var(--tw-border-style);border-width:1px}.border-negative-border{border-color:var(--color-negative-border)}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;4&quot;,&quot;y&quot;:&quot;3&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;base\/none&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;negative-text&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;negative-background&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksBorderWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksBorderColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;negative-border&quot;}}}} --&gt;\n&lt;p class=&quot;px-4 py-3 text-base\/none text-negative-text bg-negative-background rounded border border-negative-border&quot;&gt;&lt;strong&gt;Error&lt;\/strong&gt;: this paragraph is a message.&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ska-element\">\n<h2 class=\"wp-block-heading\">Generic message<\/h2>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<p class=\"px-4 py-3 text-base\/none text-site bg-plain-light rounded border\"><strong>Lorem ipsum<\/strong>: dolor sit amet, consectetur adipiscing elit.<\/p>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:paragraph {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;px-4 py-3 text-base\/none text-site bg-plain-light rounded border&quot;,&quot;css&quot;:&quot;.px-4{padding-inline:var(--spacing-4)}.py-3{padding-block:var(--spacing-3)}.text-base\\u005c\/none{font-size:var(--text-base);line-height:var(--leading-none)}.text-site{color:var(--color-site)}.bg-plain-light{background-color:var(--color-plain-light)}.rounded{border-radius:var(--radius)}.border{border-style:var(--tw-border-style);border-width:1px}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;4&quot;,&quot;y&quot;:&quot;3&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;base\/none&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;plain-light&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksBorderWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}}} --&gt;\n&lt;p class=&quot;px-4 py-3 text-base\/none text-site bg-plain-light rounded border&quot;&gt;&lt;strong&gt;Lorem ipsum&lt;\/strong&gt;: dolor sit amet, consectetur adipiscing elit.&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ska-element\">\n<h2 class=\"wp-block-heading\">Message with an icon<\/h2>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<div class=\"flex flex-row gap-2.5 items-center px-4 py-3 text-base\/none text-site bg-plain-light rounded border wp-block-ska-element\">\n<div aria-hidden=\"true\" class=\"min-w-6 h-auto text-current wp-block-ska-image image\"><svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M11.25 11.25L11.2915 11.2293C11.8646 10.9427 12.5099 11.4603 12.3545 12.082L11.6455 14.918C11.4901 15.5397 12.1354 16.0573 12.7085 15.7707L12.75 15.75M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM12 8.25H12.0075V8.2575H12V8.25Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg><\/div>\n\n\n\n<p><strong>Lorem ipsum<\/strong>: dolor sit amet, consectetur adipiscing elit.<\/p>\n<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;flex flex-row gap-2.5 items-center px-4 py-3 text-base\/none text-site bg-plain-light rounded border&quot;,&quot;css&quot;:&quot;.flex{display:flex}.flex-row{flex-direction:row}.gap-2\\u005c.5{gap:var(--spacing-2_5)}.items-center{align-items:center}.px-4{padding-inline:var(--spacing-4)}.py-3{padding-block:var(--spacing-3)}.text-base\\u005c\/none{font-size:var(--text-base);line-height:var(--leading-none)}.text-site{color:var(--color-site)}.bg-plain-light{background-color:var(--color-plain-light)}.rounded{border-radius:var(--radius)}.border{border-style:var(--tw-border-style);border-width:1px}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;flex&quot;}}},&quot;skaBlocksFlexDirection&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;row&quot;}}},&quot;skaBlocksGap&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;2.5&quot;}}},&quot;skaBlocksAlignItems&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;center&quot;}}},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;4&quot;,&quot;y&quot;:&quot;3&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;base\/none&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;plain-light&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksBorderWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}}} --&gt;\n&lt;div class=&quot;flex flex-row gap-2.5 items-center px-4 py-3 text-base\/none text-site bg-plain-light rounded border wp-block-ska-element&quot;&gt;\n&lt;!-- wp:ska\/image {&quot;mode&quot;:&quot;icon&quot;,&quot;role&quot;:&quot;presentation&quot;,&quot;svg&quot;:&quot;\\u003csvg viewBox=\\u00220 0 24 24\\u0022 fill=\\u0022none\\u0022 xmlns=\\u0022http:\/\/www.w3.org\/2000\/svg\\u0022\\u003e\\u003cpath d=\\u0022M11.25 11.25L11.2915 11.2293C11.8646 10.9427 12.5099 11.4603 12.3545 12.082L11.6455 14.918C11.4901 15.5397 12.1354 16.0573 12.7085 15.7707L12.75 15.75M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM12 8.25H12.0075V8.2575H12V8.25Z\\u0022 stroke=\\u0022currentColor\\u0022 stroke-width=\\u00221.5\\u0022 stroke-linecap=\\u0022round\\u0022 stroke-linejoin=\\u0022round\\u0022\/\\u003e\\u003c\/svg\\u003e&quot;,&quot;collection&quot;:&quot;heroicons&quot;,&quot;icon&quot;:&quot;24\/outline\/information-circle&quot;,&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;min-w-6 h-auto text-current&quot;,&quot;css&quot;:&quot;.min-w-6{min-width:var(--spacing-6)}.h-auto{height:auto}.text-current{color:currentColor}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksMinWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;6&quot;}}},&quot;skaBlocksHeight&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;auto&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;current&quot;}}}} --&gt;\n&lt;div aria-hidden=&quot;true&quot; class=&quot;min-w-6 h-auto text-current wp-block-ska-image&quot;&gt;\n&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;&lt;path d=&quot;M11.25 11.25L11.2915 11.2293C11.8646 10.9427 12.5099 11.4603 12.3545 12.082L11.6455 14.918C11.4901 15.5397 12.1354 16.0573 12.7085 15.7707L12.75 15.75M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM12 8.25H12.0075V8.2575H12V8.25Z&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/image --&gt;\n&lt;!-- wp:paragraph --&gt;\n&lt;p&gt;&lt;strong&gt;Lorem ipsum&lt;\/strong&gt;: dolor sit amet, consectetur adipiscing elit.&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ska-element\">\n<h2 class=\"wp-block-heading\">Message with a floating icon<\/h2>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<div class=\"px-4 py-3 text-base\/none text-site bg-plain-light rounded border wp-block-ska-element\">\n<div aria-hidden=\"true\" class=\"float-left mt-1 mr-1.5 min-w-6 h-auto text-current wp-block-ska-image image\"><svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M11.25 11.25L11.2915 11.2293C11.8646 10.9427 12.5099 11.4603 12.3545 12.082L11.6455 14.918C11.4901 15.5397 12.1354 16.0573 12.7085 15.7707L12.75 15.75M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM12 8.25H12.0075V8.2575H12V8.25Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg><\/div>\n\n\n\n<p><strong>Lorem ipsum dolor sit amet<\/strong>: Maecenas aliquam, dolor gravida vestibulum laoreet egestas ipsum at convallis. Maecenas aliquam, dolor gravida elementum maximus, eros ante rutrum velit, sed aliquet urna lorem at dui rutrum velit, sed aliquet urna lorem at dui elementum maximus.<\/p>\n<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;px-4 py-3 text-base\/none text-site bg-plain-light rounded border&quot;,&quot;css&quot;:&quot;.px-4{padding-inline:var(--spacing-4)}.py-3{padding-block:var(--spacing-3)}.text-base\\u005c\/none{font-size:var(--text-base);line-height:var(--leading-none)}.text-site{color:var(--color-site)}.bg-plain-light{background-color:var(--color-plain-light)}.rounded{border-radius:var(--radius)}.border{border-style:var(--tw-border-style);border-width:1px}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;4&quot;,&quot;y&quot;:&quot;3&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;base\/none&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;plain-light&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksBorderWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}}} --&gt;\n&lt;div class=&quot;px-4 py-3 text-base\/none text-site bg-plain-light rounded border wp-block-ska-element&quot;&gt;\n&lt;!-- wp:ska\/image {&quot;mode&quot;:&quot;icon&quot;,&quot;role&quot;:&quot;presentation&quot;,&quot;svg&quot;:&quot;\\u003csvg viewBox=\\u00220 0 24 24\\u0022 fill=\\u0022none\\u0022 xmlns=\\u0022http:\/\/www.w3.org\/2000\/svg\\u0022\\u003e\\u003cpath d=\\u0022M11.25 11.25L11.2915 11.2293C11.8646 10.9427 12.5099 11.4603 12.3545 12.082L11.6455 14.918C11.4901 15.5397 12.1354 16.0573 12.7085 15.7707L12.75 15.75M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM12 8.25H12.0075V8.2575H12V8.25Z\\u0022 stroke=\\u0022currentColor\\u0022 stroke-width=\\u00221.5\\u0022 stroke-linecap=\\u0022round\\u0022 stroke-linejoin=\\u0022round\\u0022\/\\u003e\\u003c\/svg\\u003e&quot;,&quot;collection&quot;:&quot;heroicons&quot;,&quot;icon&quot;:&quot;24\/outline\/information-circle&quot;,&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;float-left mt-1 mr-1.5 min-w-6 h-auto text-current&quot;,&quot;css&quot;:&quot;.float-left{float:left}.mt-1{margin-top:var(--spacing-1)}.mr-1\\u005c.5{margin-right:var(--spacing-1_5)}.min-w-6{min-width:var(--spacing-6)}.h-auto{height:auto}.text-current{color:currentColor}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksFloat&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;left&quot;}}},&quot;skaBlocksMargin&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;r&quot;:&quot;1.5&quot;,&quot;t&quot;:&quot;1&quot;,&quot;l&quot;:&quot;&quot;}},&quot;t&quot;:&quot;sides&quot;},&quot;skaBlocksMinWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;6&quot;}}},&quot;skaBlocksHeight&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;auto&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;current&quot;}}}} --&gt;\n&lt;div aria-hidden=&quot;true&quot; class=&quot;float-left mt-1 mr-1.5 min-w-6 h-auto text-current wp-block-ska-image&quot;&gt;\n&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;&lt;path d=&quot;M11.25 11.25L11.2915 11.2293C11.8646 10.9427 12.5099 11.4603 12.3545 12.082L11.6455 14.918C11.4901 15.5397 12.1354 16.0573 12.7085 15.7707L12.75 15.75M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM12 8.25H12.0075V8.2575H12V8.25Z&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/image --&gt;\n&lt;!-- wp:paragraph --&gt;\n&lt;p&gt;&lt;strong&gt;Lorem ipsum dolor sit amet&lt;\/strong&gt;: Maecenas aliquam, dolor gravida vestibulum laoreet egestas ipsum at convallis. Maecenas aliquam, dolor gravida elementum maximus, eros ante rutrum velit, sed aliquet urna lorem at dui rutrum velit, sed aliquet urna lorem at dui elementum maximus.&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ska-element\">\n<h2 class=\"wp-block-heading\">Message with a header and content<\/h2>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<div class=\"px-4 py-3 text-site bg-plain-light rounded border wp-block-ska-element\">\n<p class=\"-mt-1 mb-0 text-base\"><strong>Lorem ipsum dolor sit amet<\/strong><\/p>\n\n\n\n<p class=\"text-sm\/tight\">Vestibulum laoreet egestas ipsum at convallis. Maecenas aliquam, dolor gravida elementum maximus, eros ante rutrum velit, sed aliquet urna lorem at dui.<\/p>\n<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;px-4 py-3 text-site bg-plain-light rounded border&quot;,&quot;css&quot;:&quot;.px-4{padding-inline:var(--spacing-4)}.py-3{padding-block:var(--spacing-3)}.text-site{color:var(--color-site)}.bg-plain-light{background-color:var(--color-plain-light)}.rounded{border-radius:var(--radius)}.border{border-style:var(--tw-border-style);border-width:1px}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;4&quot;,&quot;y&quot;:&quot;3&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;plain-light&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksBorderWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}}} --&gt;\n&lt;div class=&quot;px-4 py-3 text-site bg-plain-light rounded border wp-block-ska-element&quot;&gt;\n&lt;!-- wp:paragraph {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;-mt-1 mb-0 text-base&quot;,&quot;css&quot;:&quot;.-mt-1{margin-top:calc(var(--spacing-1)*-1)}.mb-0{margin-bottom:var(--spacing-0)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksMargin&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;t&quot;:&quot;-1&quot;,&quot;b&quot;:&quot;0&quot;}},&quot;t&quot;:&quot;sides&quot;},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;base&quot;}}}} --&gt;\n&lt;p class=&quot;-mt-1 mb-0 text-base&quot;&gt;&lt;strong&gt;Lorem ipsum dolor sit amet&lt;\/strong&gt;&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;\n&lt;!-- wp:paragraph {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;text-sm\/tight&quot;,&quot;css&quot;:&quot;.text-sm\\u005c\/tight{font-size:var(--text-sm);line-height:var(--leading-tight)}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;sm\/tight&quot;}}}} --&gt;\n&lt;p class=&quot;text-sm\/tight&quot;&gt;Vestibulum laoreet egestas ipsum at convallis. Maecenas aliquam, dolor gravida elementum maximus, eros ante rutrum velit, sed aliquet urna lorem at dui.&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ska-element\">\n<h2 class=\"wp-block-heading\">Message with a list<\/h2>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<div class=\"px-4 py-3 text-site bg-plain-light rounded border wp-block-ska-element\">\n<p class=\"-mt-1 mb-0 text-base\"><strong>Lorem ipsum dolor sit amet<\/strong><\/p>\n\n\n\n<ul class=\"ml-5 text-sm\/normal list-disc wp-block-list\">\n<li>Nam vestibulum sapien viverra nisi auctor mollis<\/li>\n\n\n\n<li>Ut vitae erat vitae neque interdum congue<\/li>\n\n\n\n<li>Suspendisse eleifend dolor vel eleifend<\/li>\n<\/ul>\n<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;px-4 py-3 text-site bg-plain-light rounded border&quot;,&quot;css&quot;:&quot;.px-4{padding-inline:var(--spacing-4)}.py-3{padding-block:var(--spacing-3)}.text-site{color:var(--color-site)}.bg-plain-light{background-color:var(--color-plain-light)}.rounded{border-radius:var(--radius)}.border{border-style:var(--tw-border-style);border-width:1px}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;4&quot;,&quot;y&quot;:&quot;3&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;plain-light&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksBorderWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}}} --&gt;\n&lt;div class=&quot;px-4 py-3 text-site bg-plain-light rounded border wp-block-ska-element&quot;&gt;\n&lt;!-- wp:paragraph {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;-mt-1 mb-0 text-base&quot;,&quot;css&quot;:&quot;.-mt-1{margin-top:calc(var(--spacing-1)*-1)}.mb-0{margin-bottom:var(--spacing-0)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksMargin&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;t&quot;:&quot;-1&quot;,&quot;b&quot;:&quot;0&quot;}},&quot;t&quot;:&quot;sides&quot;},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;base&quot;}}}} --&gt;\n&lt;p class=&quot;-mt-1 mb-0 text-base&quot;&gt;&lt;strong&gt;Lorem ipsum dolor sit amet&lt;\/strong&gt;&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;\n&lt;!-- wp:list {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;ml-5 text-sm\/normal list-disc&quot;,&quot;css&quot;:&quot;.ml-5{margin-left:var(--spacing-5)}.text-sm\\u005c\/normal{font-size:var(--text-sm);line-height:var(--leading-normal)}.list-disc{list-style-type:disc}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksMargin&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;l&quot;:&quot;5&quot;}},&quot;t&quot;:&quot;sides&quot;},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;sm\/normal&quot;}}},&quot;skaBlocksListStyleType&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;disc&quot;}}}} --&gt;\n&lt;ul class=&quot;ml-5 text-sm\/normal list-disc wp-block-list&quot;&gt;\n&lt;!-- wp:list-item --&gt;\n&lt;li&gt;Nam vestibulum sapien viverra nisi auctor mollis&lt;\/li&gt;\n&lt;!-- \/wp:list-item --&gt;\n&lt;!-- wp:list-item --&gt;\n&lt;li&gt;Ut vitae erat vitae neque interdum congue&lt;\/li&gt;\n&lt;!-- \/wp:list-item --&gt;\n&lt;!-- wp:list-item --&gt;\n&lt;li&gt;Suspendisse eleifend dolor vel eleifend&lt;\/li&gt;\n&lt;!-- \/wp:list-item --&gt;\n&lt;\/ul&gt;\n&lt;!-- \/wp:list --&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ska-element\">\n<h2 class=\"wp-block-heading\">Message with an icon, header and content<\/h2>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<div class=\"flex flex-row gap-3 items-center px-4 py-3 text-site bg-plain-light rounded border wp-block-ska-element\">\n<div aria-hidden=\"true\" class=\"min-w-10 h-auto text-site\/75 wp-block-ska-image image\"><svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M3.75 3V14.25C3.75 15.4926 4.75736 16.5 6 16.5H8.25M3.75 3H2.25M3.75 3H20.25M20.25 3H21.75M20.25 3V14.25C20.25 15.4926 19.2426 16.5 18 16.5H15.75M8.25 16.5H15.75M8.25 16.5L7.25 19.5M15.75 16.5L16.75 19.5M16.75 19.5L17.25 21M16.75 19.5H7.25M7.25 19.5L6.75 21M9 11.25V12.75M12 9V12.75M15 6.75V12.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg><\/div>\n\n\n\n<div class=\"wp-block-ska-element\">\n<p class=\"-mt-1 mb-0 text-base\"><strong>Lorem ipsum dolor sit amet<\/strong><\/p>\n\n\n\n<p class=\"text-sm\/tight\">Vestibulum laoreet egestas ipsum at convallis. Maecenas aliquam, dolor gravida elementum maximus, eros ante rutrum velit, sed aliquet urna lorem at dui.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;flex flex-row gap-3 items-center px-4 py-3 text-site bg-plain-light rounded border&quot;,&quot;css&quot;:&quot;.flex{display:flex}.flex-row{flex-direction:row}.gap-3{gap:var(--spacing-3)}.items-center{align-items:center}.px-4{padding-inline:var(--spacing-4)}.py-3{padding-block:var(--spacing-3)}.text-site{color:var(--color-site)}.bg-plain-light{background-color:var(--color-plain-light)}.rounded{border-radius:var(--radius)}.border{border-style:var(--tw-border-style);border-width:1px}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;flex&quot;}}},&quot;skaBlocksFlexDirection&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;row&quot;}}},&quot;skaBlocksGap&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;3&quot;}}},&quot;skaBlocksAlignItems&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;center&quot;}}},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;4&quot;,&quot;y&quot;:&quot;3&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;plain-light&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}},&quot;skaBlocksBorderWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;DEFAULT&quot;}}}} --&gt;\n&lt;div class=&quot;flex flex-row gap-3 items-center px-4 py-3 text-site bg-plain-light rounded border wp-block-ska-element&quot;&gt;\n&lt;!-- wp:ska\/image {&quot;mode&quot;:&quot;icon&quot;,&quot;role&quot;:&quot;presentation&quot;,&quot;svg&quot;:&quot;\\u003csvg viewBox=\\u00220 0 24 24\\u0022 fill=\\u0022none\\u0022 xmlns=\\u0022http:\/\/www.w3.org\/2000\/svg\\u0022\\u003e\\u003cpath d=\\u0022M3.75 3V14.25C3.75 15.4926 4.75736 16.5 6 16.5H8.25M3.75 3H2.25M3.75 3H20.25M20.25 3H21.75M20.25 3V14.25C20.25 15.4926 19.2426 16.5 18 16.5H15.75M8.25 16.5H15.75M8.25 16.5L7.25 19.5M15.75 16.5L16.75 19.5M16.75 19.5L17.25 21M16.75 19.5H7.25M7.25 19.5L6.75 21M9 11.25V12.75M12 9V12.75M15 6.75V12.75\\u0022 stroke=\\u0022currentColor\\u0022 stroke-width=\\u00221.5\\u0022 stroke-linecap=\\u0022round\\u0022 stroke-linejoin=\\u0022round\\u0022\/\\u003e\\u003c\/svg\\u003e&quot;,&quot;collection&quot;:&quot;heroicons&quot;,&quot;icon&quot;:&quot;24\/outline\/presentation-chart-bar&quot;,&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;min-w-10 h-auto text-site\/75&quot;,&quot;css&quot;:&quot;.min-w-10{min-width:var(--spacing-10)}.h-auto{height:auto}.text-site\\u005c\/75{color:#000000a6}@supports (color:color-mix(in lab, red, red)){.text-site\\u005c\/75{color:color-mix(in oklab,var(--color-site)75%,transparent)}}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksMinWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;10&quot;}}},&quot;skaBlocksHeight&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;auto&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site\/75&quot;}}}} --&gt;\n&lt;div aria-hidden=&quot;true&quot; class=&quot;min-w-10 h-auto text-site\/75 wp-block-ska-image&quot;&gt;\n&lt;svg viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;&lt;path d=&quot;M3.75 3V14.25C3.75 15.4926 4.75736 16.5 6 16.5H8.25M3.75 3H2.25M3.75 3H20.25M20.25 3H21.75M20.25 3V14.25C20.25 15.4926 19.2426 16.5 18 16.5H15.75M8.25 16.5H15.75M8.25 16.5L7.25 19.5M15.75 16.5L16.75 19.5M16.75 19.5L17.25 21M16.75 19.5H7.25M7.25 19.5L6.75 21M9 11.25V12.75M12 9V12.75M15 6.75V12.75&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.5&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/image --&gt;\n&lt;!-- wp:ska\/element --&gt;\n&lt;div class=&quot;wp-block-ska-element&quot;&gt;\n&lt;!-- wp:paragraph {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;-mt-1 mb-0 text-base&quot;,&quot;css&quot;:&quot;.-mt-1{margin-top:calc(var(--spacing-1)*-1)}.mb-0{margin-bottom:var(--spacing-0)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksMargin&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;t&quot;:&quot;-1&quot;,&quot;b&quot;:&quot;0&quot;}},&quot;t&quot;:&quot;sides&quot;},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;base&quot;}}}} --&gt;\n&lt;p class=&quot;-mt-1 mb-0 text-base&quot;&gt;&lt;strong&gt;Lorem ipsum dolor sit amet&lt;\/strong&gt;&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;\n&lt;!-- wp:paragraph {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;text-sm\/tight&quot;,&quot;css&quot;:&quot;.text-sm\\u005c\/tight{font-size:var(--text-sm);line-height:var(--leading-tight)}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;sm\/tight&quot;}}}} --&gt;\n&lt;p class=&quot;text-sm\/tight&quot;&gt;Vestibulum laoreet egestas ipsum at convallis. Maecenas aliquam, dolor gravida elementum maximus, eros ante rutrum velit, sed aliquet urna lorem at dui.&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/element --&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ska-element\">\n<h2 class=\"wp-block-heading\">Info section<\/h2>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<div class=\"px-gutter py-5 text-sm text-info-text bg-info-background border-l-3 border-info-border wp-block-ska-element ska-preset--ska-theme--links\">\n<h4 class=\"text-base wp-block-heading\">Lorem ipsum dolor sit amet<\/h4>\n\n\n\n<p>Vestibulum laoreet egestas ipsum at convallis. Maecenas aliquam, dolor gravida elementum maximus, eros ante rutrum velit, sed aliquet urna lorem at dui.<\/p>\n\n\n\n<p>Curabitur sit amet nunc sed tellus sollicitudin fermentum. Vivamus feugiat libero quis vulputate ullamcorper.<\/p>\n\n\n\n<p><a href=\"#\">Read more -><\/a><\/p>\n<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;px-gutter py-5 text-sm text-info-text bg-info-background border-l-3 border-info-border&quot;,&quot;css&quot;:&quot;.px-gutter{padding-inline:var(--gutter)}.py-5{padding-block:var(--spacing-5)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-info-text{color:var(--color-info-text)}.bg-info-background{background-color:var(--color-info-background)}.border-l-3{border-left-style:var(--tw-border-style);border-left-width:3px}.border-info-border{border-color:var(--color-info-border)}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--links&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;gutter&quot;,&quot;y&quot;:&quot;5&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;sm&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;info-text&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;info-background&quot;}}},&quot;skaBlocksBorderWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;l&quot;:&quot;3&quot;}},&quot;t&quot;:&quot;sides&quot;},&quot;skaBlocksBorderColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;info-border&quot;}}}} --&gt;\n&lt;div class=&quot;px-gutter py-5 text-sm text-info-text bg-info-background border-l-3 border-info-border wp-block-ska-element&quot;&gt;\n&lt;!-- wp:heading {&quot;level&quot;:4,&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;text-base&quot;,&quot;css&quot;:&quot;.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;base&quot;}}}} --&gt;\n&lt;h4 class=&quot;text-base wp-block-heading&quot;&gt;Lorem ipsum dolor sit amet&lt;\/h4&gt;\n&lt;!-- \/wp:heading --&gt;\n&lt;!-- wp:paragraph --&gt;\n&lt;p&gt;Vestibulum laoreet egestas ipsum at convallis. Maecenas aliquam, dolor gravida elementum maximus, eros ante rutrum velit, sed aliquet urna lorem at dui.&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;\n&lt;!-- wp:paragraph --&gt;\n&lt;p&gt;Curabitur sit amet nunc sed tellus sollicitudin fermentum. Vivamus feugiat libero quis vulputate ullamcorper.&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;\n&lt;!-- wp:paragraph --&gt;\n&lt;p&gt;&lt;a href=&quot;#&quot;&gt;Read more -&gt;&lt;\/a&gt;&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ska-element\">\n<h2 class=\"wp-block-heading\">Warning section<\/h2>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<div class=\"px-gutter py-5 text-sm text-warning-text bg-warning-background border-l-3 border-warning-border wp-block-ska-element ska-preset--ska-theme--links\">\n<h4 class=\"text-base wp-block-heading\">Lorem ipsum dolor sit amet<\/h4>\n\n\n\n<p>Vestibulum laoreet egestas ipsum at convallis. Maecenas aliquam, dolor gravida elementum maximus, eros ante rutrum velit, sed aliquet urna lorem at dui.<\/p>\n\n\n\n<p>Curabitur sit amet nunc sed tellus sollicitudin fermentum. Vivamus feugiat libero quis vulputate ullamcorper.<\/p>\n\n\n\n<p><a href=\"#\">Read more -><\/a><\/p>\n<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;px-gutter py-5 text-sm text-warning-text bg-warning-background border-l-3 border-warning-border&quot;,&quot;css&quot;:&quot;.px-gutter{padding-inline:var(--gutter)}.py-5{padding-block:var(--spacing-5)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-warning-text{color:var(--color-warning-text)}.bg-warning-background{background-color:var(--color-warning-background)}.border-l-3{border-left-style:var(--tw-border-style);border-left-width:3px}.border-warning-border{border-color:var(--color-warning-border)}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--links&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;gutter&quot;,&quot;y&quot;:&quot;5&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;sm&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;warning-text&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;warning-background&quot;}}},&quot;skaBlocksBorderWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;l&quot;:&quot;3&quot;}},&quot;t&quot;:&quot;sides&quot;},&quot;skaBlocksBorderColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;warning-border&quot;}}}} --&gt;\n&lt;div class=&quot;px-gutter py-5 text-sm text-warning-text bg-warning-background border-l-3 border-warning-border wp-block-ska-element&quot;&gt;\n&lt;!-- wp:heading {&quot;level&quot;:4,&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;text-base&quot;,&quot;css&quot;:&quot;.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;base&quot;}}}} --&gt;\n&lt;h4 class=&quot;text-base wp-block-heading&quot;&gt;Lorem ipsum dolor sit amet&lt;\/h4&gt;\n&lt;!-- \/wp:heading --&gt;\n&lt;!-- wp:paragraph --&gt;\n&lt;p&gt;Vestibulum laoreet egestas ipsum at convallis. Maecenas aliquam, dolor gravida elementum maximus, eros ante rutrum velit, sed aliquet urna lorem at dui.&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;\n&lt;!-- wp:paragraph --&gt;\n&lt;p&gt;Curabitur sit amet nunc sed tellus sollicitudin fermentum. Vivamus feugiat libero quis vulputate ullamcorper.&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;\n&lt;!-- wp:paragraph --&gt;\n&lt;p&gt;&lt;a href=&quot;#&quot;&gt;Read more -&gt;&lt;\/a&gt;&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ska-element\">\n<h2 class=\"wp-block-heading\">Positive section<\/h2>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<div class=\"px-gutter py-5 text-sm text-positive-text bg-positive-background border-l-3 border-positive-border wp-block-ska-element ska-preset--ska-theme--links\">\n<h4 class=\"text-base wp-block-heading\">Lorem ipsum dolor sit amet<\/h4>\n\n\n\n<p>Vestibulum laoreet egestas ipsum at convallis. Maecenas aliquam, dolor gravida elementum maximus, eros ante rutrum velit, sed aliquet urna lorem at dui.<\/p>\n\n\n\n<p>Curabitur sit amet nunc sed tellus sollicitudin fermentum. Vivamus feugiat libero quis vulputate ullamcorper.<\/p>\n\n\n\n<p><a href=\"#\">Read more -><\/a><\/p>\n<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;px-gutter py-5 text-sm text-positive-text bg-positive-background border-l-3 border-positive-border&quot;,&quot;css&quot;:&quot;.px-gutter{padding-inline:var(--gutter)}.py-5{padding-block:var(--spacing-5)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-positive-text{color:var(--color-positive-text)}.bg-positive-background{background-color:var(--color-positive-background)}.border-l-3{border-left-style:var(--tw-border-style);border-left-width:3px}.border-positive-border{border-color:var(--color-positive-border)}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--links&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;gutter&quot;,&quot;y&quot;:&quot;5&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;sm&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;positive-text&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;positive-background&quot;}}},&quot;skaBlocksBorderWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;l&quot;:&quot;3&quot;}},&quot;t&quot;:&quot;sides&quot;},&quot;skaBlocksBorderColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;positive-border&quot;}}}} --&gt;\n&lt;div class=&quot;px-gutter py-5 text-sm text-positive-text bg-positive-background border-l-3 border-positive-border wp-block-ska-element&quot;&gt;\n&lt;!-- wp:heading {&quot;level&quot;:4,&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;text-base&quot;,&quot;css&quot;:&quot;.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;base&quot;}}}} --&gt;\n&lt;h4 class=&quot;text-base wp-block-heading&quot;&gt;Lorem ipsum dolor sit amet&lt;\/h4&gt;\n&lt;!-- \/wp:heading --&gt;\n&lt;!-- wp:paragraph --&gt;\n&lt;p&gt;Vestibulum laoreet egestas ipsum at convallis. Maecenas aliquam, dolor gravida elementum maximus, eros ante rutrum velit, sed aliquet urna lorem at dui.&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;\n&lt;!-- wp:paragraph --&gt;\n&lt;p&gt;Curabitur sit amet nunc sed tellus sollicitudin fermentum. Vivamus feugiat libero quis vulputate ullamcorper.&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;\n&lt;!-- wp:paragraph --&gt;\n&lt;p&gt;&lt;a href=&quot;#&quot;&gt;Read more -&gt;&lt;\/a&gt;&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-ska-element\">\n<h2 class=\"wp-block-heading\">Negative section<\/h2>\n\n\n<div class=\"ska-blocks-docs__wrapper not-prose\" x-data=\"{showContent: false, showMessage: false, showError: false}\" style=\"display:flex;flex-direction:column\">\n<div class=\"wp-block-ska-element ska-blocks-docs not-prose ska-preset--docs-blocks\">\n<div class=\"px-gutter py-5 text-sm text-negative-text bg-negative-background border-l-3 border-negative-border wp-block-ska-element ska-preset--ska-theme--links\">\n<h4 class=\"text-base wp-block-heading\">Lorem ipsum dolor sit amet<\/h4>\n\n\n\n<p>Vestibulum laoreet egestas ipsum at convallis. Maecenas aliquam, dolor gravida elementum maximus, eros ante rutrum velit, sed aliquet urna lorem at dui.<\/p>\n\n\n\n<p>Curabitur sit amet nunc sed tellus sollicitudin fermentum. Vivamus feugiat libero quis vulputate ullamcorper.<\/p>\n\n\n\n<p><a href=\"#\">Read more -><\/a><\/p>\n<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__controls\" style=\"order:-1\">\n\t<button class=\"code\" type=\"button\" x-on:click=\"showContent = !showContent\" x-text=\"showContent ? 'Hide code' : 'Show code'\" aria-pressed=\"showContent\">Show code<\/button>\n\t<div>\n\t\t<span class=\"message success\" aria-hidden=\"true\" x-cloak x-show=\"showMessage\" >Copied!<\/span>\n\t\t<span class=\"message error\" aria-hidden=\"true\" x-cloak x-show=\"showError\">Couldn&#8217;t copy!<\/span>\n\t\t<button class=\"copy\" type=\"button\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.parentElement.parentElement.nextElementSibling.querySelector('pre').innerText), showMessage = true) : showError = true\">Copy blocks<\/button>\n\t<\/div>\n<\/div>\n<div class=\"ska-blocks-docs__content ska-preset--ska-theme--code\" x-cloak x-collapse x-show=\"showContent\" hidden>\n\t<div class=\"content\">\n\t\t<pre class=\"ska-blocks-docs__blocks code\"><code class=\"html language-html\">&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;px-gutter py-5 text-sm text-negative-text bg-negative-background border-l-3 border-negative-border&quot;,&quot;css&quot;:&quot;.px-gutter{padding-inline:var(--gutter)}.py-5{padding-block:var(--spacing-5)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-negative-text{color:var(--color-negative-text)}.bg-negative-background{background-color:var(--color-negative-background)}.border-l-3{border-left-style:var(--tw-border-style);border-left-width:3px}.border-negative-border{border-color:var(--color-negative-border)}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--links&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;gutter&quot;,&quot;y&quot;:&quot;5&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;sm&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;negative-text&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;negative-background&quot;}}},&quot;skaBlocksBorderWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;l&quot;:&quot;3&quot;}},&quot;t&quot;:&quot;sides&quot;},&quot;skaBlocksBorderColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;negative-border&quot;}}}} --&gt;\n&lt;div class=&quot;px-gutter py-5 text-sm text-negative-text bg-negative-background border-l-3 border-negative-border wp-block-ska-element&quot;&gt;\n&lt;!-- wp:heading {&quot;level&quot;:4,&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;text-base&quot;,&quot;css&quot;:&quot;.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;base&quot;}}}} --&gt;\n&lt;h4 class=&quot;text-base wp-block-heading&quot;&gt;Lorem ipsum dolor sit amet&lt;\/h4&gt;\n&lt;!-- \/wp:heading --&gt;\n&lt;!-- wp:paragraph --&gt;\n&lt;p&gt;Vestibulum laoreet egestas ipsum at convallis. Maecenas aliquam, dolor gravida elementum maximus, eros ante rutrum velit, sed aliquet urna lorem at dui.&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;\n&lt;!-- wp:paragraph --&gt;\n&lt;p&gt;Curabitur sit amet nunc sed tellus sollicitudin fermentum. Vivamus feugiat libero quis vulputate ullamcorper.&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;\n&lt;!-- wp:paragraph --&gt;\n&lt;p&gt;&lt;a href=&quot;#&quot;&gt;Read more -&gt;&lt;\/a&gt;&lt;\/p&gt;\n&lt;!-- \/wp:paragraph --&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Messages are blocks of text that stand out among other content. The custom Theme palette option in Tailwind configuration contains values for positive, negative, info and warning colors which can be used to create various messages with appropriate appearances.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[5],"class_list":["post-24","post","type-post","status-publish","format-standard","hentry","category-ska-theme","tag-ui"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/24","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=24"}],"version-history":[{"count":3,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/24\/revisions"}],"predecessor-version":[{"id":576,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/24\/revisions\/576"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=24"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=24"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}