{"id":585,"date":"2025-11-12T07:16:05","date_gmt":"2025-11-12T07:16:05","guid":{"rendered":"https:\/\/ska-blocks.com\/docs\/?p=585"},"modified":"2025-11-12T07:17:45","modified_gmt":"2025-11-12T07:17:45","slug":"divider","status":"publish","type":"post","link":"https:\/\/ska-blocks.com\/docs\/divider\/","title":{"rendered":"Divider"},"content":{"rendered":"\n<p class=\"lead\">Dividers can be used to visually segment content into groups.<\/p>\n\n\n\n<p>In the WordPress Block Editor you can use the <strong>Separator block<\/strong> to create dividers with different styles or with ska-blocks and Tailwind you can create custom <code>&lt;hr&gt;<\/code> elements or use the <code>divide-*<\/code> classes to create divisions.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">WordPress dividers<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Default separator<\/h3>\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<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\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:separator --&gt;\n&lt;hr class=&quot;wp-block-separator has-alpha-channel-opacity&quot;\/&gt;\n&lt;!-- \/wp:separator --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\">Wide line separator<\/h3>\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<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\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:separator {&quot;className&quot;:&quot;is-style-wide&quot;} --&gt;\n&lt;hr class=&quot;wp-block-separator has-alpha-channel-opacity is-style-wide&quot;\/&gt;\n&lt;!-- \/wp:separator --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\">Three dots separator<\/h3>\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<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\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:separator {&quot;className&quot;:&quot;is-style-dots&quot;} --&gt;\n&lt;hr class=&quot;wp-block-separator has-alpha-channel-opacity is-style-dots&quot;\/&gt;\n&lt;!-- \/wp:separator --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\">With custom color and spacing via Tailwind classes<\/h3>\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<hr class=\"my-6 border-primary wp-block-separator has-alpha-channel-opacity\"\/>\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:separator {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;my-6 border-primary&quot;,&quot;css&quot;:&quot;.my-6{margin-block:var(--spacing-6)}.border-primary{border-color:var(--color-primary)}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksMargin&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;y&quot;:&quot;6&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksBorderColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;primary&quot;}}}} --&gt;\n&lt;hr class=&quot;my-6 border-primary wp-block-separator has-alpha-channel-opacity&quot;\/&gt;\n&lt;!-- \/wp:separator --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\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<hr class=\"my-6 border-primary wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\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:separator {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;my-6 border-primary&quot;,&quot;css&quot;:&quot;.my-6{margin-block:var(--spacing-6)}.border-primary{border-color:var(--color-primary)}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksMargin&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;y&quot;:&quot;6&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksBorderColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;primary&quot;}}},&quot;className&quot;:&quot;is-style-wide&quot;} --&gt;\n&lt;hr class=&quot;my-6 border-primary wp-block-separator has-alpha-channel-opacity is-style-wide&quot;\/&gt;\n&lt;!-- \/wp:separator --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\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<hr class=\"my-6 text-primary wp-block-separator has-alpha-channel-opacity is-style-dots\"\/>\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:separator {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;my-6 text-primary&quot;,&quot;css&quot;:&quot;.my-6{margin-block:var(--spacing-6)}.text-primary{color:var(--color-primary)}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksMargin&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;y&quot;:&quot;6&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;primary&quot;}}},&quot;className&quot;:&quot;is-style-dots&quot;} --&gt;\n&lt;hr class=&quot;my-6 text-primary wp-block-separator has-alpha-channel-opacity is-style-dots&quot;\/&gt;\n&lt;!-- \/wp:separator --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\">Custom dividers<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Horizontal rule (<code>&lt;hr&gt;<\/code>)<\/h3>\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<hr class=\"wp-block-ska-element\"\/>\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;skaBlocksAs&quot;:{&quot;isVoid&quot;:true,&quot;element&quot;:&quot;custom&quot;,&quot;customElement&quot;:&quot;hr&quot;}} --&gt;\n&lt;hr class=&quot;wp-block-ska-element&quot;\/&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\">Horizontal rule with styles<\/h3>\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<hr class=\"overflow-visible after:relative after:-top-5 after:p-1 my-4 text-center after:content-['\u00a7'] after:bg-white border-t-4 border-site border-double wp-block-ska-element\"\/>\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;overflow-visible after:relative after:-top-5 after:p-1 my-4 text-center after:content-[&#039;\u00a7&#039;] after:bg-white border-t-4 border-site border-double&quot;,&quot;css&quot;:&quot;.overflow-visible{overflow:visible}.after\\u005c:relative:after{content:var(--tw-content);position:relative}.after\\u005c:-top-5:after{content:var(--tw-content);top:calc(var(--spacing-5)*-1)}.after\\u005c:p-1:after{content:var(--tw-content);padding:var(--spacing-1)}.my-4{margin-block:var(--spacing-4)}.text-center{text-align:center}.after\\u005c:content-\\u005c[\\u005c&#039;\u00a7\\u005c&#039;\\u005c]:after{content:var(--tw-content);--tw-content:\\u0022\u00a7\\u0022;content:var(--tw-content)}.after\\u005c:bg-white:after{content:var(--tw-content);background-color:var(--color-white)}.border-t-4{border-top-style:var(--tw-border-style);border-top-width:4px}.border-site{border-color:var(--color-site)}.border-double{--tw-border-style:double;border-style:double}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksAs&quot;:{&quot;isVoid&quot;:false,&quot;element&quot;:&quot;custom&quot;,&quot;customElement&quot;:&quot;hr&quot;},&quot;skaBlocksSelectors&quot;:{&quot;after&quot;:{&quot;skaBlocksContent&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;[&#039;\u00a7&#039;]&quot;}},&quot;a&quot;:[&quot;[&#039;\u00a7&#039;]&quot;]},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;white&quot;}}},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;relative&quot;}}},&quot;skaBlocksTopRightBottomLeft&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;t&quot;:&quot;-5&quot;}}},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;1&quot;}}}}},&quot;skaBlocksOverflow&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;visible&quot;}}},&quot;skaBlocksMargin&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;y&quot;:&quot;4&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksTextAlign&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;center&quot;}}},&quot;skaBlocksBorderWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;t&quot;:&quot;4&quot;}},&quot;t&quot;:&quot;sides&quot;},&quot;skaBlocksBorderColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site&quot;}}},&quot;skaBlocksBorderStyle&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;double&quot;}}}} --&gt;\n&lt;hr class=&quot;overflow-visible after:relative after:-top-5 after:p-1 my-4 text-center after:content-[&#039;\u00a7&#039;] after:bg-white border-t-4 border-site border-double wp-block-ska-element&quot;\/&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\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<hr class=\"overflow-visible after:relative after:-top-[1.05rem] my-4 text-center text-primary after:content-['\u25cf'] border-t-4 border-primary-light\/50 border-dotted wp-block-ska-element\"\/>\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;overflow-visible after:relative after:-top-[1.05rem] my-4 text-center text-primary after:content-[&#039;\u25cf&#039;] border-t-4 border-primary-light\/50 border-dotted&quot;,&quot;css&quot;:&quot;.overflow-visible{overflow:visible}.after\\u005c:relative:after{content:var(--tw-content);position:relative}.after\\u005c:-top-\\u005c[1\\u005c.05rem\\u005c]:after{content:var(--tw-content);top:-1.05rem}.my-4{margin-block:var(--spacing-4)}.text-center{text-align:center}.text-primary{color:var(--color-primary)}.after\\u005c:content-\\u005c[\\u005c&#039;\u25cf\\u005c&#039;\\u005c]:after{content:var(--tw-content);--tw-content:\\u0022\u25cf\\u0022;content:var(--tw-content)}.border-t-4{border-top-style:var(--tw-border-style);border-top-width:4px}.border-primary-light\\u005c\/50{border-color:color-mix(in srgb,color-mix(in oklab,var(--color-primary),white 10%)50%,transparent)}@supports (color:color-mix(in lab, red, red)){.border-primary-light\\u005c\/50{border-color:color-mix(in oklab,var(--color-primary-light)50%,transparent)}}.border-dotted{--tw-border-style:dotted;border-style:dotted}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksAs&quot;:{&quot;isVoid&quot;:false,&quot;element&quot;:&quot;custom&quot;,&quot;customElement&quot;:&quot;hr&quot;},&quot;skaBlocksSelectors&quot;:{&quot;after&quot;:{&quot;skaBlocksContent&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;[&#039;\u25cf&#039;]&quot;}},&quot;a&quot;:[&quot;[&#039;\u25cf&#039;]&quot;]},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;relative&quot;}}},&quot;skaBlocksTopRightBottomLeft&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;t&quot;:&quot;-[1.05rem]&quot;}},&quot;a&quot;:[&quot;[1.05rem]&quot;]}}},&quot;skaBlocksOverflow&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;visible&quot;}}},&quot;skaBlocksMargin&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;y&quot;:&quot;4&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksTextAlign&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;center&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;primary&quot;}}},&quot;skaBlocksBorderWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;t&quot;:&quot;4&quot;}},&quot;t&quot;:&quot;sides&quot;},&quot;skaBlocksBorderColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;primary-light\/50&quot;}}},&quot;skaBlocksBorderStyle&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;dotted&quot;}}}} --&gt;\n&lt;hr class=&quot;overflow-visible after:relative after:-top-[1.05rem] my-4 text-center text-primary after:content-[&#039;\u25cf&#039;] border-t-4 border-primary-light\/50 border-dotted wp-block-ska-element&quot;\/&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\">Horizontal divider with text<\/h3>\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 before:basis-1\/2 after:basis-1\/2 gap-3 items-center my-4 h-auto before:h-px after:h-px text-sm\/none tracking-wide text-center text-site-muted uppercase whitespace-nowrap before:bg-site-border after:bg-site-border select-none wp-block-ska-text ska-text\">Divider<\/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\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;flex before:basis-1\/2 after:basis-1\/2 gap-3 items-center my-4 h-auto before:h-px after:h-px text-sm\/none tracking-wide text-center text-site-muted uppercase whitespace-nowrap before:bg-site-border after:bg-site-border select-none&quot;,&quot;css&quot;:&quot;.flex{display:flex}.before\\u005c:basis-1\\u005c\/2:before{content:var(--tw-content);flex-basis:50%}.after\\u005c:basis-1\\u005c\/2:after{content:var(--tw-content);flex-basis:50%}.gap-3{gap:var(--spacing-3)}.items-center{align-items:center}.my-4{margin-block:var(--spacing-4)}.h-auto{height:auto}.before\\u005c:h-px:before{content:var(--tw-content);content:var(--tw-content);height:1px;height:var(--spacing-px)}.after\\u005c:h-px:after{content:var(--tw-content);content:var(--tw-content);height:1px;height:var(--spacing-px)}.text-sm\\u005c\/none{font-size:var(--text-sm);line-height:var(--leading-none)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.text-center{text-align:center}.text-site-muted{color:var(--color-site-muted)}.uppercase{text-transform:uppercase}.whitespace-nowrap{white-space:nowrap}.before\\u005c:bg-site-border:before{content:var(--tw-content);background-color:var(--color-site-border)}.after\\u005c:bg-site-border:after{content:var(--tw-content);background-color:var(--color-site-border)}.select-none{-webkit-user-select:none;user-select:none}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;custom&quot;},&quot;skaBlocksSelectors&quot;:{&quot;before&quot;:{&quot;skaBlocksHeight&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;px&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site-border&quot;}}},&quot;skaBlocksFlexBasis&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;1\/2&quot;}}}},&quot;after&quot;:{&quot;skaBlocksHeight&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;px&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site-border&quot;}}},&quot;skaBlocksFlexBasis&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;1\/2&quot;}}}}},&quot;skaBlocksVariables&quot;:{&quot;record&quot;:[]},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;flex&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;skaBlocksMargin&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;y&quot;:&quot;4&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksHeight&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;auto&quot;}}},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;sm\/none&quot;}}},&quot;skaBlocksLetterSpacing&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;wide&quot;}}},&quot;skaBlocksTextAlign&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;center&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site-muted&quot;}}},&quot;skaBlocksTextTransform&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;uppercase&quot;}}},&quot;skaBlocksWhitespace&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;nowrap&quot;}}},&quot;skaBlocksUserSelect&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;none&quot;}}}} --&gt;\n&lt;div class=&quot;flex before:basis-1\/2 after:basis-1\/2 gap-3 items-center my-4 h-auto before:h-px after:h-px text-sm\/none tracking-wide text-center text-site-muted uppercase whitespace-nowrap before:bg-site-border after:bg-site-border select-none wp-block-ska-text ska-text&quot;&gt;Divider&lt;\/div&gt;\n&lt;!-- \/wp:ska\/text --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\">Horizontal divider with an icon<\/h3>\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 before:basis-1\/2 after:basis-1\/2 justify-between items-center my-4 h-auto before:h-px after:h-px before:bg-site-border after:bg-site-border wp-block-ska-element\">\n<div aria-hidden=\"true\" class=\"aspect-square p-2 size-10 text-site-muted bg-site-border\/50 rounded-full wp-block-ska-image image\"><svg   viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n\t<path d=\"M11.6444 1.58965C11.8664 1.47012 12.1336 1.47012 12.3556 1.58965L22.1056 6.83965C22.3485 6.97046 22.5 7.22409 22.5 7.5C22.5 7.77591 22.3485 8.02954 22.1056 8.16035L12.3556 13.4104C12.1336 13.5299 11.8664 13.5299 11.6444 13.4104L1.89443 8.16035C1.65149 8.02954 1.5 7.77591 1.5 7.5C1.5 7.22409 1.65149 6.97046 1.89443 6.83965L11.6444 1.58965Z\" fill=\"currentColor\"><\/path>\n\t<path d=\"M3.26468 10.6018L10.9333 14.731C11.5992 15.0896 12.4008 15.0896 13.0667 14.7311L20.7353 10.6018L22.1056 11.3396C22.3485 11.4704 22.5 11.7241 22.5 12C22.5 12.2759 22.3485 12.5295 22.1056 12.6603L12.3556 17.9103C12.1336 18.0299 11.8664 18.0299 11.6444 17.9103L1.89443 12.6603C1.65149 12.5295 1.5 12.2759 1.5 12C1.5 11.7241 1.65149 11.4704 1.89443 11.3396L3.26468 10.6018Z\" fill=\"currentColor\"><\/path>\n\t<path d=\"M10.9333 19.231L3.26468 15.1018L1.89443 15.8396C1.65149 15.9704 1.5 16.2241 1.5 16.5C1.5 16.7759 1.65149 17.0295 1.89443 17.1603L11.6444 22.4103C11.8664 22.5299 12.1336 22.5299 12.3556 22.4103L22.1056 17.1603C22.3485 17.0295 22.5 16.7759 22.5 16.5C22.5 16.2241 22.3485 15.9704 22.1056 15.8396L20.7353 15.1018L13.0667 19.2311C12.4008 19.5896 11.5992 19.5896 10.9333 19.231Z\" fill=\"currentColor\"><\/path>\n<\/svg><\/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 before:basis-1\/2 after:basis-1\/2 justify-between items-center my-4 h-auto before:h-px after:h-px before:bg-site-border after:bg-site-border&quot;,&quot;css&quot;:&quot;.flex{display:flex}.before\\u005c:basis-1\\u005c\/2:before{content:var(--tw-content);flex-basis:50%}.after\\u005c:basis-1\\u005c\/2:after{content:var(--tw-content);flex-basis:50%}.justify-between{justify-content:space-between}.items-center{align-items:center}.my-4{margin-block:var(--spacing-4)}.h-auto{height:auto}.before\\u005c:h-px:before{content:var(--tw-content);content:var(--tw-content);height:1px;height:var(--spacing-px)}.after\\u005c:h-px:after{content:var(--tw-content);content:var(--tw-content);height:1px;height:var(--spacing-px)}.before\\u005c:bg-site-border:before{content:var(--tw-content);background-color:var(--color-site-border)}.after\\u005c:bg-site-border:after{content:var(--tw-content);background-color:var(--color-site-border)}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksAppender&quot;:{&quot;type&quot;:&quot;hidden&quot;},&quot;skaBlocksSelectors&quot;:{&quot;before&quot;:{&quot;skaBlocksHeight&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;px&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site-border&quot;}}},&quot;skaBlocksFlexBasis&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;1\/2&quot;}}}},&quot;after&quot;:{&quot;skaBlocksHeight&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;px&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site-border&quot;}}},&quot;skaBlocksFlexBasis&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;1\/2&quot;}}}}},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;flex&quot;}}},&quot;skaBlocksJustifyContent&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;between&quot;}}},&quot;skaBlocksAlignItems&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;center&quot;}}},&quot;skaBlocksMargin&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;y&quot;:&quot;4&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksHeight&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;auto&quot;}}}} --&gt;\n&lt;div class=&quot;flex before:basis-1\/2 after:basis-1\/2 justify-between items-center my-4 h-auto before:h-px after:h-px before:bg-site-border after:bg-site-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 data-svg-width=\\u002224\\u0022 data-svg-height=\\u002224\\u0022 viewBox=\\u00220 0 24 24\\u0022 fill=\\u0022none\\u0022 xmlns=\\u0022http:\/\/www.w3.org\/2000\/svg\\u0022\\u003e\\n\\t\\u003cpath d=\\u0022M11.6444 1.58965C11.8664 1.47012 12.1336 1.47012 12.3556 1.58965L22.1056 6.83965C22.3485 6.97046 22.5 7.22409 22.5 7.5C22.5 7.77591 22.3485 8.02954 22.1056 8.16035L12.3556 13.4104C12.1336 13.5299 11.8664 13.5299 11.6444 13.4104L1.89443 8.16035C1.65149 8.02954 1.5 7.77591 1.5 7.5C1.5 7.22409 1.65149 6.97046 1.89443 6.83965L11.6444 1.58965Z\\u0022 fill=\\u0022currentColor\\u0022 \/\\u003e\\n\\t\\u003cpath d=\\u0022M3.26468 10.6018L10.9333 14.731C11.5992 15.0896 12.4008 15.0896 13.0667 14.7311L20.7353 10.6018L22.1056 11.3396C22.3485 11.4704 22.5 11.7241 22.5 12C22.5 12.2759 22.3485 12.5295 22.1056 12.6603L12.3556 17.9103C12.1336 18.0299 11.8664 18.0299 11.6444 17.9103L1.89443 12.6603C1.65149 12.5295 1.5 12.2759 1.5 12C1.5 11.7241 1.65149 11.4704 1.89443 11.3396L3.26468 10.6018Z\\u0022 fill=\\u0022currentColor\\u0022 \/\\u003e\\n\\t\\u003cpath d=\\u0022M10.9333 19.231L3.26468 15.1018L1.89443 15.8396C1.65149 15.9704 1.5 16.2241 1.5 16.5C1.5 16.7759 1.65149 17.0295 1.89443 17.1603L11.6444 22.4103C11.8664 22.5299 12.1336 22.5299 12.3556 22.4103L22.1056 17.1603C22.3485 17.0295 22.5 16.7759 22.5 16.5C22.5 16.2241 22.3485 15.9704 22.1056 15.8396L20.7353 15.1018L13.0667 19.2311C12.4008 19.5896 11.5992 19.5896 10.9333 19.231Z\\u0022 fill=\\u0022currentColor\\u0022 \/\\u003e\\n\\u003c\/svg\\u003e&quot;,&quot;collection&quot;:&quot;heroicons&quot;,&quot;icon&quot;:&quot;24\/solid\/square-3-stack-3d&quot;,&quot;wrap&quot;:false,&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;aspect-square p-2 size-10 text-site-muted bg-site-border\/50 rounded-full&quot;,&quot;css&quot;:&quot;.aspect-square{aspect-ratio:1}.p-2{padding:var(--spacing-2)}.size-10{width:var(--spacing-10);height:var(--spacing-10)}.text-site-muted{color:var(--color-site-muted)}.bg-site-border\\u005c\/50{background-color:#e5e7eb80}@supports (color:color-mix(in lab, red, red)){.bg-site-border\\u005c\/50{background-color:color-mix(in oklab,var(--color-site-border)50%,transparent)}}.rounded-full{border-radius:3.40282e38px}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksAspectRatio&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;square&quot;}}},&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;2&quot;}}},&quot;skaBlocksSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;10&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site-muted&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site-border\/50&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;full&quot;}}}} --&gt;\n&lt;div aria-hidden=&quot;true&quot; class=&quot;aspect-square p-2 size-10 text-site-muted bg-site-border\/50 rounded-full wp-block-ska-image&quot;&gt;\n&lt;svg data-svg-width=&quot;24&quot; data-svg-height=&quot;24&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot;&gt;\n\t&lt;path d=&quot;M11.6444 1.58965C11.8664 1.47012 12.1336 1.47012 12.3556 1.58965L22.1056 6.83965C22.3485 6.97046 22.5 7.22409 22.5 7.5C22.5 7.77591 22.3485 8.02954 22.1056 8.16035L12.3556 13.4104C12.1336 13.5299 11.8664 13.5299 11.6444 13.4104L1.89443 8.16035C1.65149 8.02954 1.5 7.77591 1.5 7.5C1.5 7.22409 1.65149 6.97046 1.89443 6.83965L11.6444 1.58965Z&quot; fill=&quot;currentColor&quot;&gt;&lt;\/path&gt;\n\t&lt;path d=&quot;M3.26468 10.6018L10.9333 14.731C11.5992 15.0896 12.4008 15.0896 13.0667 14.7311L20.7353 10.6018L22.1056 11.3396C22.3485 11.4704 22.5 11.7241 22.5 12C22.5 12.2759 22.3485 12.5295 22.1056 12.6603L12.3556 17.9103C12.1336 18.0299 11.8664 18.0299 11.6444 17.9103L1.89443 12.6603C1.65149 12.5295 1.5 12.2759 1.5 12C1.5 11.7241 1.65149 11.4704 1.89443 11.3396L3.26468 10.6018Z&quot; fill=&quot;currentColor&quot;&gt;&lt;\/path&gt;\n\t&lt;path d=&quot;M10.9333 19.231L3.26468 15.1018L1.89443 15.8396C1.65149 15.9704 1.5 16.2241 1.5 16.5C1.5 16.7759 1.65149 17.0295 1.89443 17.1603L11.6444 22.4103C11.8664 22.5299 12.1336 22.5299 12.3556 22.4103L22.1056 17.1603C22.3485 17.0295 22.5 16.7759 22.5 16.5C22.5 16.2241 22.3485 15.9704 22.1056 15.8396L20.7353 15.1018L13.0667 19.2311C12.4008 19.5896 11.5992 19.5896 10.9333 19.231Z&quot; fill=&quot;currentColor&quot;&gt;&lt;\/path&gt;\n&lt;\/svg&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/image --&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\">Horizontal divider with an icon and text<\/h3>\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 before:basis-1\/3 after:basis-1\/3 justify-evenly items-center my-4 h-auto before:h-px after:h-px before:bg-site-border after:bg-site-border wp-block-ska-element\">\n<div class=\"flex flex-row gap-2 items-center select-none wp-block-ska-element\">\n<div aria-hidden=\"true\" class=\"size-5 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.4806 3.4987C11.6728 3.03673 12.3272 3.03673 12.5193 3.4987L14.6453 8.61016C14.7263 8.80492 14.9095 8.93799 15.1197 8.95485L20.638 9.39724C21.1367 9.43722 21.339 10.0596 20.959 10.3851L16.7546 13.9866C16.5945 14.1238 16.5245 14.3391 16.5734 14.5443L17.8579 19.9292C17.974 20.4159 17.4446 20.8005 17.0176 20.5397L12.2932 17.6541C12.1132 17.5441 11.8868 17.5441 11.7068 17.6541L6.98238 20.5397C6.55539 20.8005 6.02594 20.4159 6.14203 19.9292L7.42652 14.5443C7.47546 14.3391 7.4055 14.1238 7.24531 13.9866L3.04099 10.3851C2.661 10.0596 2.86323 9.43722 3.36197 9.39724L8.88022 8.95485C9.09048 8.93799 9.27363 8.80492 9.35464 8.61016L11.4806 3.4987Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path><\/svg><\/div>\n\n\n\n<div class=\"text-sm\/none tracking-wide text-center text-site-muted uppercase whitespace-nowrap wp-block-ska-text ska-text\">Reviews<\/div>\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 before:basis-1\/3 after:basis-1\/3 justify-evenly items-center my-4 h-auto before:h-px after:h-px before:bg-site-border after:bg-site-border&quot;,&quot;css&quot;:&quot;.flex{display:flex}.before\\u005c:basis-1\\u005c\/3:before{content:var(--tw-content);flex-basis:33.3333%}.after\\u005c:basis-1\\u005c\/3:after{content:var(--tw-content);flex-basis:33.3333%}.justify-evenly{justify-content:space-evenly}.items-center{align-items:center}.my-4{margin-block:var(--spacing-4)}.h-auto{height:auto}.before\\u005c:h-px:before{content:var(--tw-content);content:var(--tw-content);height:1px;height:var(--spacing-px)}.after\\u005c:h-px:after{content:var(--tw-content);content:var(--tw-content);height:1px;height:var(--spacing-px)}.before\\u005c:bg-site-border:before{content:var(--tw-content);background-color:var(--color-site-border)}.after\\u005c:bg-site-border:after{content:var(--tw-content);background-color:var(--color-site-border)}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksAppender&quot;:{&quot;type&quot;:&quot;hidden&quot;},&quot;skaBlocksSelectors&quot;:{&quot;before&quot;:{&quot;skaBlocksHeight&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;px&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site-border&quot;}}},&quot;skaBlocksFlexBasis&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;1\/3&quot;}}}},&quot;after&quot;:{&quot;skaBlocksHeight&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;px&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site-border&quot;}}},&quot;skaBlocksFlexBasis&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;1\/3&quot;}}}}},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;flex&quot;}}},&quot;skaBlocksJustifyContent&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;evenly&quot;}}},&quot;skaBlocksAlignItems&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;center&quot;}}},&quot;skaBlocksMargin&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;y&quot;:&quot;4&quot;}},&quot;t&quot;:&quot;axis&quot;},&quot;skaBlocksHeight&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;auto&quot;}}}} --&gt;\n&lt;div class=&quot;flex before:basis-1\/3 after:basis-1\/3 justify-evenly items-center my-4 h-auto before:h-px after:h-px before:bg-site-border after:bg-site-border wp-block-ska-element&quot;&gt;\n&lt;!-- wp:ska\/element {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;flex flex-row gap-2 items-center select-none&quot;,&quot;css&quot;:&quot;.flex{display:flex}.flex-row{flex-direction:row}.gap-2{gap:var(--spacing-2)}.items-center{align-items:center}.select-none{-webkit-user-select:none;user-select:none}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksAppender&quot;:{&quot;type&quot;:&quot;hidden&quot;},&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&quot;}}},&quot;skaBlocksAlignItems&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;center&quot;}}},&quot;skaBlocksUserSelect&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;none&quot;}}}} --&gt;\n&lt;div class=&quot;flex flex-row gap-2 items-center select-none 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.4806 3.4987C11.6728 3.03673 12.3272 3.03673 12.5193 3.4987L14.6453 8.61016C14.7263 8.80492 14.9095 8.93799 15.1197 8.95485L20.638 9.39724C21.1367 9.43722 21.339 10.0596 20.959 10.3851L16.7546 13.9866C16.5945 14.1238 16.5245 14.3391 16.5734 14.5443L17.8579 19.9292C17.974 20.4159 17.4446 20.8005 17.0176 20.5397L12.2932 17.6541C12.1132 17.5441 11.8868 17.5441 11.7068 17.6541L6.98238 20.5397C6.55539 20.8005 6.02594 20.4159 6.14203 19.9292L7.42652 14.5443C7.47546 14.3391 7.4055 14.1238 7.24531 13.9866L3.04099 10.3851C2.661 10.0596 2.86323 9.43722 3.36197 9.39724L8.88022 8.95485C9.09048 8.93799 9.27363 8.80492 9.35464 8.61016L11.4806 3.4987Z\\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\/star&quot;,&quot;wrap&quot;:false,&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;size-5 text-current&quot;,&quot;css&quot;:&quot;.size-5{width:var(--spacing-5);height:var(--spacing-5)}.text-current{color:currentColor}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;5&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;size-5 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.4806 3.4987C11.6728 3.03673 12.3272 3.03673 12.5193 3.4987L14.6453 8.61016C14.7263 8.80492 14.9095 8.93799 15.1197 8.95485L20.638 9.39724C21.1367 9.43722 21.339 10.0596 20.959 10.3851L16.7546 13.9866C16.5945 14.1238 16.5245 14.3391 16.5734 14.5443L17.8579 19.9292C17.974 20.4159 17.4446 20.8005 17.0176 20.5397L12.2932 17.6541C12.1132 17.5441 11.8868 17.5441 11.7068 17.6541L6.98238 20.5397C6.55539 20.8005 6.02594 20.4159 6.14203 19.9292L7.42652 14.5443C7.47546 14.3391 7.4055 14.1238 7.24531 13.9866L3.04099 10.3851C2.661 10.0596 2.86323 9.43722 3.36197 9.39724L8.88022 8.95485C9.09048 8.93799 9.27363 8.80492 9.35464 8.61016L11.4806 3.4987Z&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\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;text-sm\/none tracking-wide text-center text-site-muted uppercase whitespace-nowrap&quot;,&quot;css&quot;:&quot;.text-sm\\u005c\/none{font-size:var(--text-sm);line-height:var(--leading-none)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.text-center{text-align:center}.text-site-muted{color:var(--color-site-muted)}.uppercase{text-transform:uppercase}.whitespace-nowrap{white-space:nowrap}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;custom&quot;},&quot;skaBlocksVariables&quot;:{&quot;record&quot;:[]},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;sm\/none&quot;}}},&quot;skaBlocksLetterSpacing&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;wide&quot;}}},&quot;skaBlocksTextAlign&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;center&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site-muted&quot;}}},&quot;skaBlocksTextTransform&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;uppercase&quot;}}},&quot;skaBlocksWhitespace&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;nowrap&quot;}}}} --&gt;\n&lt;div class=&quot;text-sm\/none tracking-wide text-center text-site-muted uppercase whitespace-nowrap wp-block-ska-text ska-text&quot;&gt;Reviews&lt;\/div&gt;\n&lt;!-- \/wp:ska\/text --&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>\n\n\n<h3 class=\"wp-block-heading\"><code>divide-y<\/code> class with a list<\/h3>\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<ul class=\"divide-y wp-block-ska-element\">\n<li class=\"wp-block-ska-text ska-text\">Item 1<\/li>\n\n\n\n<li class=\"wp-block-ska-text ska-text\">Item 2<\/li>\n\n\n\n<li class=\"wp-block-ska-text ska-text\">Item 3<\/li>\n<\/ul>\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;divide-y&quot;,&quot;css&quot;:&quot;:where(.divide-y\\u003e:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)))}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksAppender&quot;:{&quot;type&quot;:&quot;repeater&quot;,&quot;stripContent&quot;:true},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;ul&quot;},&quot;skaBlocksDivideWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;y&quot;:&quot;DEFAULT&quot;}}}} --&gt;\n&lt;ul class=&quot;divide-y wp-block-ska-element&quot;&gt;\n&lt;!-- wp:ska\/text {&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;li&quot;}} --&gt;\n&lt;li class=&quot;wp-block-ska-text ska-text&quot;&gt;Item 1&lt;\/li&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;!-- wp:ska\/text {&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;li&quot;}} --&gt;\n&lt;li class=&quot;wp-block-ska-text ska-text&quot;&gt;Item 2&lt;\/li&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;!-- wp:ska\/text {&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;li&quot;}} --&gt;\n&lt;li class=&quot;wp-block-ska-text ska-text&quot;&gt;Item 3&lt;\/li&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;\/ul&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\"><code>divide-x<\/code> class with a horizontal list<\/h3>\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<ul class=\"flex flex-row flex-wrap items-center *:pr-3 space-x-3 divide-x wp-block-ska-element\">\n<li class=\"wp-block-ska-text ska-text\">Item 1<\/li>\n\n\n\n<li class=\"wp-block-ska-text ska-text\">Item 2<\/li>\n\n\n\n<li class=\"wp-block-ska-text ska-text\">Item 3<\/li>\n<\/ul>\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 flex-wrap items-center *:pr-3 space-x-3 divide-x&quot;,&quot;css&quot;:&quot;.flex{display:flex}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}:is(.\\u005c*\\u005c:pr-3\\u003e*){padding-right:var(--spacing-3)}:where(.space-x-3\\u003e:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(var(--spacing-3)*var(--tw-space-x-reverse));margin-inline-end:calc(var(--spacing-3)*calc(1 - var(--tw-space-x-reverse)))}:where(.divide-x\\u003e:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(1px*var(--tw-divide-x-reverse));border-inline-end-width:calc(1px*calc(1 - var(--tw-divide-x-reverse)))}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksAppender&quot;:{&quot;type&quot;:&quot;repeater&quot;,&quot;stripContent&quot;:true},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;ul&quot;},&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;skaBlocksFlexWrap&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;wrap&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;*&quot;:{&quot;r&quot;:&quot;3&quot;}},&quot;t&quot;:&quot;sides&quot;},&quot;skaBlocksSpaceBetween&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;x&quot;:&quot;3&quot;}}},&quot;skaBlocksDivideWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;y&quot;:&quot;&quot;,&quot;x&quot;:&quot;DEFAULT&quot;}}}} --&gt;\n&lt;ul class=&quot;flex flex-row flex-wrap items-center *:pr-3 space-x-3 divide-x wp-block-ska-element&quot;&gt;\n&lt;!-- wp:ska\/text {&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;li&quot;}} --&gt;\n&lt;li class=&quot;wp-block-ska-text ska-text&quot;&gt;Item 1&lt;\/li&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;!-- wp:ska\/text {&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;li&quot;}} --&gt;\n&lt;li class=&quot;wp-block-ska-text ska-text&quot;&gt;Item 2&lt;\/li&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;!-- wp:ska\/text {&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;li&quot;}} --&gt;\n&lt;li class=&quot;wp-block-ska-text ska-text&quot;&gt;Item 3&lt;\/li&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;\/ul&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>\n\n\n<h3 class=\"wp-block-heading\">Button divider<\/h3>\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 isolate flex-row flex-wrap gap-0 items-stretch *:text-lg wp-block-ska-element\">\n<a href=\"#\" class=\"pr-6 rounded-r-none wp-block-ska-text ska-text ska-preset--ska-theme--button\">Go back<\/a>\n\n\n\n<span class=\"before:aspect-square before:grid relative before:absolute before:top-1\/2 before:-left-3.5 before:z-1 before:place-items-center w-px before:w-7 before:text-sm\/relaxed before:text-site-subtext before:content-['or'] before:bg-white before:rounded-full before:-translate-y-1\/2 wp-block-ska-text ska-text\"><\/span>\n\n\n\n<a href=\"#\" class=\"[--fg:var(--color-site-inverted)] [--bg:var(--color-positive)] [--accent:var(--color-positive)] pl-6 rounded-l-none wp-block-ska-text ska-text ska-preset--ska-theme--button\">Confirm<\/a>\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 isolate flex-row flex-wrap gap-0 items-stretch *:text-lg&quot;,&quot;css&quot;:&quot;.flex{display:flex}.isolate{isolation:isolate}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.gap-0{gap:var(--spacing-0)}.items-stretch{align-items:stretch}:is(.\\u005c*\\u005c:text-lg\\u003e*){font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksAppender&quot;:{&quot;type&quot;:&quot;hidden&quot;},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;flex&quot;}}},&quot;skaBlocksIsolation&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;isolate&quot;}}},&quot;skaBlocksFlexDirection&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;row&quot;}}},&quot;skaBlocksFlexWrap&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;wrap&quot;}}},&quot;skaBlocksGap&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;0&quot;}}},&quot;skaBlocksAlignItems&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;stretch&quot;}}},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;},&quot;*&quot;:{&quot;@&quot;:&quot;lg&quot;}}}} --&gt;\n&lt;div class=&quot;flex isolate flex-row flex-wrap gap-0 items-stretch *:text-lg wp-block-ska-element&quot;&gt;\n&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;pr-6 rounded-r-none&quot;,&quot;css&quot;:&quot;.pr-6{padding-right:var(--spacing-6)}.rounded-r-none{border-top-right-radius:0;border-bottom-right-radius:0}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;},&quot;skaBlocksVariation&quot;:&quot;ska-theme--button&quot;,&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;r&quot;:&quot;6&quot;}},&quot;t&quot;:&quot;sides&quot;},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;r&quot;:&quot;none&quot;}},&quot;t&quot;:&quot;sides&quot;}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;pr-6 rounded-r-none wp-block-ska-text ska-text&quot;&gt;Go back&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;before:aspect-square before:grid relative before:absolute before:top-1\/2 before:-left-3.5 before:z-1 before:place-items-center w-px before:w-7 before:text-sm\/relaxed before:text-site-subtext before:content-[&#039;or&#039;] before:bg-white before:rounded-full before:-translate-y-1\/2&quot;,&quot;css&quot;:&quot;.before\\u005c:aspect-square:before{content:var(--tw-content);aspect-ratio:1}.before\\u005c:grid:before{content:var(--tw-content);display:grid}.relative{position:relative}.before\\u005c:absolute:before{content:var(--tw-content);position:absolute}.before\\u005c:top-1\\u005c\/2:before{content:var(--tw-content);top:50%}.before\\u005c:-left-3\\u005c.5:before{content:var(--tw-content);left:calc(var(--spacing-3_5)*-1)}.before\\u005c:z-1:before{content:var(--tw-content);z-index:1}.before\\u005c:place-items-center:before{content:var(--tw-content);place-items:center}.w-px{width:1px;width:var(--spacing-px)}.before\\u005c:w-7:before{content:var(--tw-content);width:var(--spacing-7)}.before\\u005c:text-sm\\u005c\/relaxed:before{content:var(--tw-content);font-size:var(--text-sm);line-height:var(--leading-relaxed)}.before\\u005c:text-site-subtext:before{content:var(--tw-content);color:var(--color-site-subtext)}.before\\u005c:content-\\u005c[\\u005c&#039;or\\u005c&#039;\\u005c]:before{content:var(--tw-content);--tw-content:\\u0022or\\u0022;content:var(--tw-content)}.before\\u005c:bg-white:before{content:var(--tw-content);background-color:var(--color-white)}.before\\u005c:rounded-full:before{content:var(--tw-content);border-radius:3.40282e38px}.before\\u005c:-translate-y-1\\u005c\/2:before{content:var(--tw-content);--tw-translate-y:calc(calc(1\/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}&quot;,&quot;t&quot;:1758876679},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;span&quot;,&quot;isVoid&quot;:true},&quot;skaBlocksSelectors&quot;:{&quot;before&quot;:{&quot;skaBlocksContent&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;[&#039;or&#039;]&quot;}},&quot;a&quot;:[&quot;[&#039;or&#039;]&quot;]},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;absolute&quot;}}},&quot;skaBlocksZIndex&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;1&quot;}}},&quot;skaBlocksBackgroundColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;white&quot;}}},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;full&quot;}}},&quot;skaBlocksAspectRatio&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;square&quot;}}},&quot;skaBlocksWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;7&quot;}}},&quot;skaBlocksTextColor&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;site-subtext&quot;}}},&quot;skaBlocksFontSize&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;sm\/relaxed&quot;}}},&quot;skaBlocksTopRightBottomLeft&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;t&quot;:&quot;1\/2&quot;,&quot;l&quot;:&quot;-3.5&quot;}}},&quot;skaBlocksTranslate&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;y&quot;:&quot;-1\/2&quot;}}},&quot;skaBlocksDisplay&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;grid&quot;}}},&quot;skaBlocksPlaceItems&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;center&quot;}}},&quot;skaBlocksVariables&quot;:{&quot;record&quot;:[]}}},&quot;skaBlocksPosition&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;relative&quot;}}},&quot;skaBlocksWidth&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;px&quot;}}}} --&gt;\n&lt;span class=&quot;before:aspect-square before:grid relative before:absolute before:top-1\/2 before:-left-3.5 before:z-1 before:place-items-center w-px before:w-7 before:text-sm\/relaxed before:text-site-subtext before:content-[&#039;or&#039;] before:bg-white before:rounded-full before:-translate-y-1\/2 wp-block-ska-text ska-text&quot;&gt;&lt;\/span&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;!-- wp:ska\/text {&quot;skaBlocks&quot;:{&quot;cx&quot;:&quot;[--fg:var(--color-site-inverted)] [--bg:var(--color-positive)] [--accent:var(--color-positive)] pl-6 rounded-l-none&quot;,&quot;css&quot;:&quot;.\\u005c[--fg\\u005c:var\\u005c(--color-site-inverted\\u005c)\\u005c]{--fg:var(--color-site-inverted)}.\\u005c[--bg\\u005c:var\\u005c(--color-positive\\u005c)\\u005c]{--bg:var(--color-positive)}.\\u005c[--accent\\u005c:var\\u005c(--color-positive\\u005c)\\u005c]{--accent:var(--color-positive)}.pl-6{padding-left:var(--spacing-6)}.rounded-l-none{border-top-left-radius:0;border-bottom-left-radius:0}&quot;,&quot;t&quot;:1758876679,&quot;p&quot;:[{&quot;id&quot;:&quot;ska-theme--button&quot;,&quot;isStatic&quot;:true}]},&quot;skaBlocksAs&quot;:{&quot;element&quot;:&quot;a&quot;,&quot;href&quot;:&quot;#&quot;},&quot;skaBlocksVariables&quot;:{&quot;record&quot;:{&quot;--fg&quot;:{&quot;value&quot;:&quot;var(--color-site-inverted)&quot;,&quot;type&quot;:&quot;color&quot;},&quot;--bg&quot;:{&quot;value&quot;:&quot;var(--color-positive)&quot;,&quot;type&quot;:&quot;color&quot;},&quot;--accent&quot;:{&quot;value&quot;:&quot;var(--color-positive)&quot;,&quot;type&quot;:&quot;color&quot;}}},&quot;skaBlocksVariation&quot;:&quot;ska-theme--button&quot;,&quot;skaBlocksPadding&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;l&quot;:&quot;6&quot;}},&quot;t&quot;:&quot;sides&quot;},&quot;skaBlocksBorderRadius&quot;:{&quot;v&quot;:{&quot;$&quot;:{&quot;@&quot;:&quot;&quot;,&quot;l&quot;:&quot;none&quot;}},&quot;t&quot;:&quot;sides&quot;}} --&gt;\n&lt;a href=&quot;#&quot; class=&quot;[--fg:var(--color-site-inverted)] [--bg:var(--color-positive)] [--accent:var(--color-positive)] pl-6 rounded-l-none wp-block-ska-text ska-text&quot;&gt;Confirm&lt;\/a&gt;\n&lt;!-- \/wp:ska\/text --&gt;\n&lt;\/div&gt;\n&lt;!-- \/wp:ska\/element --&gt;<\/code><\/pre>\n\t<\/div>\n<\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Dividers can be used to visually segment content into groups. In the WordPress Block Editor you can use the Separator block to create dividers with different styles or with ska-blocks and Tailwind you can create custom &lt;hr&gt; elements or use the divide-* classes to create divisions. WordPress dividers Default separator Wide line separator Three dots&hellip;<\/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-585","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\/585","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=585"}],"version-history":[{"count":2,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/585\/revisions"}],"predecessor-version":[{"id":588,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/585\/revisions\/588"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=585"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=585"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}