{"id":1634,"date":"2026-07-28T22:33:56","date_gmt":"2026-07-28T22:33:56","guid":{"rendered":"http:\/\/home.test\/canvas-wp-test\/utilities\/"},"modified":"2026-07-30T16:03:11","modified_gmt":"2026-07-30T16:03:11","slug":"utilities","status":"publish","type":"page","link":"https:\/\/demos.canvaswp.com\/classic\/utilities\/","title":{"rendered":"Utilities"},"content":{"rendered":"\n<div class=\"wp-block-group container is-layout-flow wp-block-group-is-layout-flow\">\n\n<div class=\"wp-block-group row g-md-5 justify-content-between position-relative is-layout-flow wp-block-group-is-layout-flow\">\n\n<div class=\"wp-block-group col-md-3 position-sticky h-100 pt-md-6 bg-white z-2 is-layout-flow wp-block-group-is-layout-flow\">\n<a aria-controls=\"utilitiesCollapse\" aria-expanded=\"false\" data-bs-toggle=\"collapse\" class=\"btn btn-primary d-block d-md-none my-4 p-4 w-100\" href=\"#utilitiesCollapse\" role=\"button\">Categories<\/a><ul data-easing=\"easeInOutExpo\" data-offset-wi=\"125\" data-offset-xxl=\"50\" data-speed=\"800\" class=\"one-page-menu list-group list-group-flush collapse dont-collapse-sm\" id=\"utilitiesCollapse\"><li class=\"list-group-item\"><a data-href=\"#section-borders\" href=\"#\"><div>Borders<\/div><\/a><\/li><li class=\"list-group-item\"><a data-href=\"#section-opacity\" href=\"#\"><div>Opacity<\/div><\/a><\/li><li class=\"list-group-item\"><a data-href=\"#section-text\" href=\"#\"><div>Text Utilities<\/div><\/a><\/li><li class=\"list-group-item\"><a data-href=\"#section-colors\" href=\"#\"><div>Colors<\/div><\/a><\/li><li class=\"list-group-item\"><a data-href=\"#section-backgrounds\" href=\"#\"><div>Backgrounds<\/div><\/a><\/li><li class=\"list-group-item\"><a data-href=\"#section-radius\" href=\"#\"><div>Radius<\/div><\/a><\/li><li class=\"list-group-item\"><a data-href=\"#section-shadows\" href=\"#\"><div>Shadows<\/div><\/a><\/li><li class=\"list-group-item\"><a data-href=\"#section-transforms\" href=\"#\"><div>Transforms<\/div><\/a><\/li><li class=\"list-group-item\"><a data-href=\"#section-sizes\" href=\"#\"><div>Sizes<\/div><\/a><\/li><li class=\"list-group-item\"><a data-href=\"#section-gutters\" href=\"#\"><div>Gutters<\/div><\/a><\/li><\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-group col-md-8 is-layout-flow wp-block-group-is-layout-flow\">\n\n<div id=\"section-borders\" class=\"wp-block-group page-section py-md-6 my-0 is-layout-flow wp-block-group-is-layout-flow\">\n<h1>Borders<\/h1>\n\n\n<p class=\"wp-block-paragraph\">Border utilities let you quickly add or remove borders, control their width and color, and round corners on any element. Use these helper classes to style edges without writing custom CSS.<\/p>\n\n\n<h3>Sizing<\/h3>\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n\n<div class=\"wp-block-group row g-3 is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border bg-light border-width-0 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border border-width-1 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border border-width-2 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border border-width-3 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border border-width-4 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border border-width-5 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border border-width-6 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n<\/div>\n\n<\/div>\n\n<pre class=\"mt-4 p-4 rounded bg-light\"><code class=\"language-html\">&lt;div class=&quot;border border-width-1&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border border-width-2&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border border-width-3&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border border-width-4&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border border-width-5&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border border-width-6&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n\n<div class=\"line\"><\/div>\n\n<h3>Colors<\/h3>\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n\n<div class=\"wp-block-group row g-3 is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border border-f5 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border border-color is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border border-primary is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border border-secondary is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border border-danger is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border border-success is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border border-warning is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border border-info is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border border-dark is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border border-light is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border border-facebook is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border border-whatsapp is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n<\/div>\n\n<\/div>\n\n<pre class=\"mt-4 p-4 rounded bg-light\"><code class=\"language-html\">&lt;div class=&quot;border border-f5&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border border-color&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border border-primary&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border border-secondary&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border border-danger&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border border-success&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border border-warning&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border border-info&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border border-dark&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border border-light&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border border-facebook&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border border-whatsapp&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n\n<div class=\"line\"><\/div>\n\n<h3>Sizing On Hover<\/h3>\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n\n<div class=\"wp-block-group row g-3 is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border bg-light h-border-width-0 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border border-danger h-border-width-1 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border border-danger h-border-width-2 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border border-danger h-border-width-3 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border border-danger h-border-width-4 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border border-danger h-border-width-5 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border border-danger h-border-width-6 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border border-danger border-width-3 h-border-width-6 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n<\/div>\n\n<\/div>\n\n<pre class=\"mt-4 p-4 rounded bg-light\"><code class=\"language-html\">&lt;div class=&quot;border h-border-width-0&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border h-border-width-1&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border h-border-width-2&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border h-border-width-3&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border h-border-width-4&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border h-border-width-5&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border h-border-width-6&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border border-width-3 h-border-width-6&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n\n<div class=\"line\"><\/div>\n\n<h3>Colors On Hover<\/h3>\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n\n<div class=\"wp-block-group row g-3 is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border h-border-default is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border h-border-f5 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border h-border-color is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border h-border-primary is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border h-border-secondary is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border h-border-danger is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border h-border-success is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border h-border-warning is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border h-border-info is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border h-border-dark is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border h-border-light is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border h-border-facebook is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border h-border-whatsapp is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-md border border-danger h-border-success is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n<\/div>\n\n<\/div>\n\n<pre class=\"mt-4 p-4 rounded bg-light\"><code class=\"language-html\">&lt;div class=&quot;border h-border-f5&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border h-border-color&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border h-border-primary&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border h-border-secondary&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border h-border-danger&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border h-border-success&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border h-border-warning&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border h-border-info&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border h-border-dark&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border h-border-light&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border h-border-facebook&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border h-border-whatsapp&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border border-danger h-border-whatsapp&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n\n<div class=\"line\"><\/div>\n\n<h3>Styles<\/h3>\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n\n<div class=\"wp-block-group row g-3 is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-lg border border-width-3 border-solid is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-lg border border-width-3 border-dotted is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-lg border border-width-3 border-dashed is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-lg border border-width-6 border-double is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n<\/div>\n\n<\/div>\n\n<pre class=\"mt-4 p-4 rounded bg-light\"><code class=\"language-html\">&lt;div class=&quot;border border-solid&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border border-dotted&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border border-dashed&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;border border-double&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n<\/div>\n\n\n<div class=\"double-line line border-danger my-3\"><\/div>\n\n\n<div id=\"section-opacity\" class=\"wp-block-group page-section py-6 bg-white my-0 is-layout-flow wp-block-group-is-layout-flow\">\n<h1>Opacity<\/h1>\n\n<h3>Default classes<\/h3>\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n\n<div class=\"wp-block-group row g-3 is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark op-0 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark op-01 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark op-02 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark op-03 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark op-04 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark op-05 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark op-06 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark op-07 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark op-08 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark op-08 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark op-1 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n<\/div>\n\n<\/div>\n\n<pre class=\"mt-4 p-4 rounded bg-light\"><code class=\"language-html\">&lt;div class=&quot;op-0&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;op-01&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;op-02&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;op-03&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;op-04&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;op-05&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;op-06&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;op-07&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;op-08&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;op-09&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;op-1&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n\n<div class=\"line\"><\/div>\n\n<h3>On Hover<\/h3>\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n\n<div class=\"wp-block-group row g-3 is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark h-op-0 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark h-op-01 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark h-op-02 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark h-op-03 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark h-op-04 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark h-op-05 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark h-op-06 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark h-op-07 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark h-op-08 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark h-op-08 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark h-op-1 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark op-05 h-op-1 is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark h-op-01 op-ts is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n<\/div>\n\n<\/div>\n\n<pre class=\"mt-4 p-4 rounded bg-light\"><code class=\"language-html\">&lt;div class=&quot;h-op-0&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;h-op-01&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;h-op-02&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;h-op-03&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;h-op-04&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;h-op-05&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;h-op-06&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;h-op-07&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;h-op-08&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;h-op-09&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;h-op-1&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;op-05 h-op-1&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;h-op-01 op-ts&quot;&gt;&lt;\/div&gt;&lt;!-- with transition .op-ts --&gt;<\/code><\/pre>\n<\/div>\n\n\n<div class=\"double-line line border-danger my-3\"><\/div>\n\n\n<div id=\"section-text\" class=\"wp-block-group page-section py-6 my-0 is-layout-flow wp-block-group-is-layout-flow\">\n<h1>Text<\/h1>\n\n<h3>Text Sizes<\/h3>\n\n\n<p class=\"display-1 mb-0 wp-block-paragraph\">Display 1<\/p>\n\n\n\n<p class=\"display-2 mb-0 wp-block-paragraph\">Display 2<\/p>\n\n\n\n<p class=\"display-3 mb-0 wp-block-paragraph\">Display 3<\/p>\n\n\n\n<p class=\"display-4 mb-0 wp-block-paragraph\">Display 4<\/p>\n\n\n\n<p class=\"display-5 mb-0 wp-block-paragraph\">Display 5<\/p>\n\n\n\n<p class=\"display-6 wp-block-paragraph\">Display 6<\/p>\n\n\n\n<p class=\"h1 wp-block-paragraph\">h1 heading<\/p>\n\n\n\n<p class=\"h2 wp-block-paragraph\">h2 heading<\/p>\n\n\n\n<p class=\"h3 wp-block-paragraph\">h3 heading<\/p>\n\n\n\n<p class=\"h4 wp-block-paragraph\">h4 heading<\/p>\n\n\n\n<p class=\"h5 wp-block-paragraph\">h5 heading<\/p>\n\n\n\n<p class=\"h6 mb-4 wp-block-paragraph\">h6 heading<\/p>\n\n\n\n<p class=\"lead mb-0 wp-block-paragraph\">Lead\/ Heading Subltitle<\/p>\n\n\n<pre class=\"mt-4 p-4 rounded bg-light\"><code class=\"language-html\">&lt;p class=&quot;display-1&quot;&gt;&lt;\/p&gt;\n&lt;p class=&quot;display-2&quot;&gt;&lt;\/p&gt;\n&lt;p class=&quot;display-3&quot;&gt;&lt;\/p&gt;\n&lt;p class=&quot;display-4&quot;&gt;&lt;\/p&gt;\n&lt;p class=&quot;display-5&quot;&gt;&lt;\/p&gt;\n&lt;p class=&quot;display-6&quot;&gt;&lt;\/p&gt;\n&lt;p class=&quot;h1&quot;&gt;&lt;\/p&gt;\n&lt;p class=&quot;h2&quot;&gt;&lt;\/p&gt;\n&lt;p class=&quot;h3&quot;&gt;&lt;\/p&gt;\n&lt;p class=&quot;h4&quot;&gt;&lt;\/p&gt;\n&lt;p class=&quot;h5&quot;&gt;&lt;\/p&gt;\n&lt;p class=&quot;h6&quot;&gt;&lt;\/p&gt;\n&lt;p class=&quot;lead&quot;&gt;&lt;\/p&gt;<\/code><\/pre>\n\n<div class=\"line\"><\/div>\n\n<h3>Text Transform<\/h3>\n\n\n<p class=\"mb-3 text-lowercase wp-block-paragraph\">Lowercased Text.<\/p>\n\n\n\n<p class=\"mb-3 text-uppercase wp-block-paragraph\">Uppercased text.<\/p>\n\n\n\n<p class=\"mb-3 text-capitalize wp-block-paragraph\">capiTaliZed text.<\/p>\n\n\n<pre class=\"mt-4 p-4 rounded bg-light\"><code class=\"language-html\">&lt;div class=&quot;text-lowercase&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;text-uppercase&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;text-capitalize&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n\n<div class=\"line\"><\/div>\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"mb-4 h4 ls-0\">Letter Spacing<\/div><div class=\"mb-4 h4 ls-1\">Letter Spacing<\/div><div class=\"mb-4 h4 ls-2\">Letter Spacing<\/div><div class=\"mb-4 h4 ls-3\">Letter Spacing<\/div><div class=\"mb-4 h4 ls-4\">Letter Spacing<\/div><div class=\"mb-4 h4 ls-5\">Letter Spacing<\/div>\n<\/div>\n\n<pre class=\"mt-4 p-4 rounded bg-light\"><code class=\"language-html\">&lt;div class=&quot;ls-0&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;ls-1&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;ls-2&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;ls-3&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;ls-4&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;ls-5&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n\n<div class=\"line\"><\/div>\n\n<h3>Font Families<\/h3>\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n\n<div class=\"wp-block-group row g-3 is-layout-flow wp-block-group-is-layout-flow\"><div class=\"col-auto text-dark me-3 h5 font-body\">Font Body<\/div><div class=\"col-auto text-dark me-3 h5 font-primary\">Font Primary<\/div><div class=\"col-auto text-dark h5 me-3 font-secondary\">Font Secondary<\/div><div class=\"col-auto text-dark h5 font-monospace\">Font monospace<\/div><\/div>\n\n<\/div>\n\n<pre class=\"mt-4 p-4 rounded bg-light\"><code class=\"language-html\">&lt;div class=&quot;font-body&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;font-primary&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;font-secondary&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;font-monospace&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n\n<div class=\"line\"><\/div>\n\n<h3>Font Weights<\/h3>\n\n\n<p class=\"mb-2 fw-lighter wp-block-paragraph\">Lighter weight text.<\/p>\n\n\n\n<p class=\"mb-2 fw-light wp-block-paragraph\">Light weight text.<\/p>\n\n\n\n<p class=\"mb-2 fw-normal wp-block-paragraph\">Normal weight text.<\/p>\n\n\n\n<p class=\"mb-2 fw-medium wp-block-paragraph\">Normal weight text.<\/p>\n\n\n\n<p class=\"mb-2 fw-semibold wp-block-paragraph\">Normal weight text.<\/p>\n\n\n\n<p class=\"mb-2 fw-bold wp-block-paragraph\">Bold text.<\/p>\n\n\n\n<p class=\"mb-2 fw-bolder wp-block-paragraph\">Bolder weight text.<\/p>\n\n\n\n<p class=\"mb-2 fst-italic wp-block-paragraph\">Italic text.<\/p>\n\n\n\n<p class=\"mb-2 fst-normal wp-block-paragraph\">Text with normal font style.<\/p>\n\n\n<pre class=\"mt-4 p-4 rounded bg-light\"><code class=\"language-html\">&lt;div class=&quot;fw-lighter&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;fw-light&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;fw-normal&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;fw-medium&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;fw-semibold&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;fw-bold&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;fw-bolder&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;fst-italic&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;fst-normal&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n\n<div class=\"line\"><\/div>\n\n<h3>Text Alignment<\/h3>\n\n\n<p class=\"mb-3 text-start wp-block-paragraph\">Start aligned text on all viewport sizes.<\/p>\n\n\n\n<p class=\"mb-3 text-center wp-block-paragraph\">Center aligned text on all viewport sizes.<\/p>\n\n\n\n<p class=\"mb-3 text-end wp-block-paragraph\">End aligned text on all viewport sizes.<\/p>\n\n\n\n<p class=\"mb-3 text-center text-sm-start wp-block-paragraph\">Start aligned text on viewports sized SM or Text Center.<\/p>\n\n\n\n<p class=\"mb-3 text-center text-md-start wp-block-paragraph\">Start aligned text on viewports sized MD or Text Center.<\/p>\n\n\n\n<p class=\"mb-3 text-center text-lg-start wp-block-paragraph\">Start aligned text on viewports sized LG or Text Center.<\/p>\n\n\n\n<p class=\"mb-3 text-center text-xl-start wp-block-paragraph\">Start aligned text on viewports sized XL or Text Center.<\/p>\n\n\n<pre class=\"mt-4 p-4 rounded bg-light\"><code class=\"language-html\">&lt;p class=&quot;text-start&quot;&gt;&lt;\/p&gt;\n&lt;p class=&quot;text-center&quot;&gt;&lt;\/p&gt;\n&lt;p class=&quot;text-end&quot;&gt;&lt;\/p&gt;\n&lt;p class=&quot;text-center text-sm-start&quot;&gt;&lt;\/p&gt;\n&lt;p class=&quot;text-center text-md-start&quot;&gt;&lt;\/p&gt;\n&lt;p class=&quot;text-center text-lg-start&quot;&gt;&lt;\/p&gt;\n&lt;p class=&quot;text-center text-xl-start&quot;&gt;&lt;\/p&gt;<\/code><\/pre>\n\n<div class=\"line\"><\/div>\n\n<h3>Text Decoration<\/h3>\n\n\n<p class=\"mb-2 text-decoration-underline wp-block-paragraph\">This text has a line underneath it.<\/p>\n\n\n\n<p class=\"mb-2 text-decoration-line-through wp-block-paragraph\">This text has a line going through it.<\/p>\n\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<a class=\"text-decoration-none\" href=\"#\">This link has its text decoration removed<\/a><\/div>\n\n<pre class=\"mt-4 p-4 rounded bg-light\"><code class=\"language-html\">&lt;p class=&quot;text-decoration-underline&quot;&gt;&lt;\/p&gt;\n&lt;p class=&quot;text-decoration-line-through&quot;&gt;&lt;\/p&gt;\n&lt;a href=&quot;#&quot; class=&quot;text-decoration-none&quot;&gt;&lt;\/a&gt;<\/code><\/pre>\n<\/div>\n\n\n<div class=\"double-line line border-danger my-3\"><\/div>\n\n\n<div id=\"section-colors\" class=\"wp-block-group page-section py-6 bg-white my-0 is-layout-flow wp-block-group-is-layout-flow\">\n<h1>Colors<\/h1>\n\n<h3>On Text<\/h3>\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n\n<div class=\"wp-block-group row g-3 is-layout-flow wp-block-group-is-layout-flow\"><div class=\"col-auto color\">theme-color<\/div><div class=\"col-auto text-primary\">text-primary<\/div><div class=\"col-auto text-secondary\">text-secondary<\/div><div class=\"col-auto text-success\">text-success<\/div><div class=\"col-auto text-info\">text-info<\/div><div class=\"col-auto text-danger\">text-danger<\/div><div class=\"col-auto text-warning\">text-warning<\/div><div class=\"col-auto text-light\">text-light<\/div><div class=\"col-auto text-dark\">text-dark<\/div><div class=\"col-auto color-facebook\">color-facebook<\/div><div class=\"col-auto color-twitter\">color-twitter<\/div><\/div>\n\n<\/div>\n\n<pre class=\"mt-4 p-4 rounded bg-light\"><code class=\"language-html\">&#x3C;div class=&#x22;color\"&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x3C;div class=&#x22;text-primary&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x3C;div class=&#x22;text-secondary&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x3C;div class=&#x22;text-success&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x3C;div class=&#x22;text-info&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x3C;div class=&#x22;text-danger&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x3C;div class=&#x22;text-warning&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x3C;div class=&#x22;text-light&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x3C;div class=&#x22;text-dark&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x3C;div class=&#x22;color-facebook&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x3C;div class=&#x22;color-twitter&#x22;&#x3E;&#x3C;\/div&#x3E;<\/code><\/pre>\n\n<div class=\"line\"><\/div>\n\n<h3>On Hover Color<\/h3>\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n\n<div class=\"wp-block-group row g-3 is-layout-flow wp-block-group-is-layout-flow\"><div class=\"col-auto h-color\">theme-color<\/div><div class=\"col-auto h-text-primary\">text-primary<\/div><div class=\"col-auto h-text-secondary\">text-secondary<\/div><div class=\"col-auto h-text-success\">text-success<\/div><div class=\"col-auto h-text-info\">text-info<\/div><div class=\"col-auto h-text-danger\">text-danger<\/div><div class=\"col-auto h-text-warning\">text-warning<\/div><div class=\"col-auto h-text-light\">text-light<\/div><div class=\"col-auto h-text-dark\">text-dark<\/div><div class=\"col-auto h-color-facebook\">color-facebook<\/div><div class=\"col-auto h-color-twitter\">color-twitter<\/div><div class=\"col-auto text-danger h-text-primary\">color-twitter<\/div><\/div>\n\n<\/div>\n\n<pre class=\"mt-4 p-4 rounded bg-light\"><code class=\"language-html\">&#x3C;div class=&#x22;h-color\"&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x3C;div class=&#x22;h-text-primary&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x3C;div class=&#x22;h-text-secondary&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x3C;div class=&#x22;h-text-success&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x3C;div class=&#x22;h-text-info&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x3C;div class=&#x22;h-text-danger&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x3C;div class=&#x22;h-text-warning&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x3C;div class=&#x22;h-text-light&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x3C;div class=&#x22;h-text-dark&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x3C;div class=&#x22;h-color-facebook&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x3C;div class=&#x22;h-color-twitter&#x22;&#x3E;&#x3C;\/div&#x3E;<\/code><\/pre>\n\n<div class=\"line\"><\/div>\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"row g-3\"><div class=\"col-6\"><h3 class=\"col-12 h5 mb-4\">Icons<\/h3><div class=\"col-auto d-inline-flex me-4\"><i class=\"h3 color-facebook fa-brands fa-facebook-f\" aria-hidden=\"true\"><\/i><\/div><div class=\"col-auto d-inline-flex me-4\"><i class=\"h3 color-twitter fa-brands fa-twitter\" aria-hidden=\"true\"><\/i><\/div><div class=\"col-auto d-inline-flex me-4\"><i class=\"h3 color-whatsapp fa-brands fa-whatsapp\" aria-hidden=\"true\"><\/i><\/div><\/div><div class=\"col-6\"><h3 class=\"col-12 h5 mb-4\">Icons &#8211; Hover<\/h3><div class=\"col-auto d-inline-flex me-4\"><i class=\"h3 text-dark h-color-facebook fa-brands fa-facebook-f\" aria-hidden=\"true\"><\/i><\/div><div class=\"col-auto d-inline-flex me-4\"><i class=\"h3 text-dark h-color-twitter fa-brands fa-twitter\" aria-hidden=\"true\"><\/i><\/div><div class=\"col-auto d-inline-flex me-4\"><i class=\"h3 text-dark h-color-whatsapp fa-brands fa-whatsapp\" aria-hidden=\"true\"><\/i><\/div><\/div><\/div><\/div>\n\n<pre class=\"mt-4 p-4 rounded bg-light\"><code class=\"language-html\">&lt;i class=&quot;fa-brands fa-facebook-f color-facebook&quot;&gt;\n&lt;i class=&quot;fa-brands fa-twitter color-twitter&quot;&gt;\n&lt;i class=&quot;fa-brands fa-whatsapp color-whatsapp&quot;&gt;\n&lt;!-- hover .h-* --&gt;\n&lt;i class=&quot;fa-brands fa-facebook-f h-color-facebook&quot;&gt;\n&lt;i class=&quot;fa-brands fa-twitter h-color-twitter&quot;&gt;\n&lt;i class=&quot;fa-brands fa-whatsapp h-color-whatsapp&quot;&gt;<\/code><\/pre>\n\n<div class=\"line\"><\/div>\n\n<h3 class=\"mb-2 display-4 fw-bold gradient-text gradient-green-dark\">gradient-green-dark<\/h3>\n\n<h3 class=\"mb-2 display-4 fw-bold gradient-text gradient-grey-brown\">gradient-grey-brown<\/h3>\n\n<h3 class=\"mb-2 display-4 fw-bold gradient-text gradient-light-pink\">gradient-light-pink<\/h3>\n\n<h3 class=\"mb-2 display-4 fw-bold gradient-text gradient-blue-purple\">gradient-blue-purple<\/h3>\n\n<h3 class=\"mb-2 display-4 fw-bold gradient-text gradient-multiples\">gradient-multiples<\/h3>\n\n<h3 class=\"mb-2 display-4 fw-bold gradient-text gradient-blue-green\">gradient-blue-green<\/h3>\n\n<h3 class=\"mb-2 display-4 fw-bold gradient-text gradient-grey-orange\">gradient-grey-orange<\/h3>\n\n<h3 class=\"mb-2 display-4 fw-bold gradient-text gradient-sunset\">gradient-sunset<\/h3>\n\n<h3 class=\"mb-2 display-4 fw-bold gradient-text gradient-lemon\">gradient-lemon<\/h3>\n\n<h3 class=\"mb-2 display-4 fw-bold gradient-text gradient-earth\">gradient-earth<\/h3>\n\n<h3 class=\"mb-2 display-4 fw-bold gradient-text gradient-horizon\">gradient-horizon<\/h3>\n\n<h3 class=\"display-4 fw-bold gradient-text gradient-ocean h-gradient-purple-blue\">gradient-horizon<\/h3>\n\n<pre class=\"mt-4 p-4 rounded bg-light\"><code class=\"language-html\">&lt;div class=&quot;gradient-text gradient-green-dark&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;gradient-text gradient-grey-brown&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;gradient-text gradient-light-pink&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;gradient-text gradient-blue-purple&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;gradient-text gradient-multiples&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;gradient-text gradient-blue-green&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;gradient-text gradient-grey-orange&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;gradient-text gradient-lemon&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;gradient-text gradient-earth&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;gradient-text gradient-horizon&quot;&gt;&lt;\/div&gt;\n&lt;!-- with hover .h-* --&gt;\n&lt;div class=&quot;gradient-text gradient-ocean h-gradient-purple-blue&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\"><div class=\"alert bg-primary-light mt-0\"><small class=\"text-primary\">Same Works on hover with <code>.h-gradient-* <\/code><\/small><\/div><\/div>\n\n\n<div class=\"line\"><\/div>\n\n<h3>Gradients Text Underline<\/h3>\n\n<h3 class=\"d-inline-block display-4 fw-bold gradient-underline gradient-lemon\">About The Conference<\/h3>\n\n<h3 class=\"d-inline-block display-4 fw-bold gradient-underline gradient-blue-green\">About The Conference<\/h3>\n\n<pre class=\"mt-4 p-4 rounded bg-light\"><code class=\"language-html\">&lt;div class=&quot;d-inline-block gradient-underline gradient-lemon&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;d-inline-block gradient-underline gradient-blue-green&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n<\/div>\n\n\n<div class=\"double-line line border-danger my-3\"><\/div>\n\n\n<div id=\"section-backgrounds\" class=\"wp-block-group page-section py-6 bg-white my-0 is-layout-flow wp-block-group-is-layout-flow\">\n<h1>Backgrounds<\/h1>\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n\n<div class=\"wp-block-group row g-3 is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-color is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-primary is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-secondary is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-success is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-info is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-danger is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-warning is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-light is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-facebook is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-x-twitter is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-youtube is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-whatsapp is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dribbble is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-android is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n<\/div>\n\n<\/div>\n\n<pre class=\"mt-4 p-4 rounded bg-light\"><code class=\"language-html\">&lt;div class=&quot;bg-color&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;bg-primary&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;bg-secondary&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;bg-success&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;bg-info&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;bg-danger&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;bg-warning&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;bg-light&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;bg-dark&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;bg-facebook&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;bg-x-twitter&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;bg-youtube&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;bg-whatsapp&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;bg-dribbble&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;bg-android&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n\n<div class=\"line\"><\/div>\n\n<h3>On Hover<\/h3>\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n\n<div class=\"wp-block-group row g-3 is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark h-bg-color is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark h-bg-primary is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark h-bg-secondary is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark h-bg-success is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark h-bg-info is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark h-bg-danger is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark h-bg-warning is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark h-bg-light is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-light h-bg-dark is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark h-bg-facebook is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark h-bg-x-twitter is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark h-bg-youtube is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark h-bg-whatsapp is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark h-bg-dribbble is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark h-bg-android is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-android h-bg-danger bg-ts is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n<\/div>\n\n<\/div>\n\n<pre class=\"mt-4 p-4 rounded bg-light\"><code class=\"language-html\">&lt;div class=&quot;bg-dark h-bg-color&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;bg-dark h-bg-primary&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;bg-dark h-bg-secondary&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;bg-dark h-bg-success&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;bg-dark h-bg-info&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;bg-dark h-bg-danger&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;bg-dark h-bg-warning&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;bg-dark h-bg-light&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;bg-light h-bg-dark&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;bg-dark h-bg-facebook&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;bg-dark h-bg-x-twitter&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;bg-dark h-bg-youtube&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;bg-dark h-bg-whatsapp&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;bg-dark h-bg-dribbble&quot;&gt;&lt;\/div&gt;\n&lt;!-- with transition .bg-ts --&gt;\n&lt;div class=&quot;bg-android h-bg-danger bg-ts&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n\n<div class=\"line\"><\/div>\n\n<h3>Bootstrap Background Light<\/h3>\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n\n<div class=\"wp-block-group row g-3 is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-primary-light is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-secondary-light is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-success-light is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-info-light is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-danger-light is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-warning-light is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm bg-dark-light is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n<\/div>\n\n<\/div>\n\n<pre class=\"mt-4 p-4 rounded bg-light\"><code class=\"language-html\">&lt;div class=&quot;bg-primary-light&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;bg-secondary-light&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;bg-success-light&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;bg-info-light&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;bg-danger-light&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;bg-warning-light&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;bg-dark-light&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n\n<div class=\"line\"><\/div>\n\n<h3>Gradients<\/h3>\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n\n<div class=\"wp-block-group row g-3 is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm gradient-light-grey is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm gradient-green-dark is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm gradient-grey-brown is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm gradient-light-pink is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm gradient-blue-purple is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm gradient-multiples is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm gradient-blue-green is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm gradient-light is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm gradient-grey-orange is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm gradient-sunset is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm gradient-dark is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm gradient-lemon is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm gradient-earth is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm gradient-horizon is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-sm gradient-ocean h-gradient-green-blue is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n<\/div>\n\n<\/div>\n\n<pre class=\"mt-4 p-4 rounded bg-light\"><code class=\"language-html\">&lt;div class=&quot;gradient-light-grey&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;gradient-green-dark&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;gradient-grey-brown&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;gradient-light-pink&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;gradient-blue-purple&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;gradient-multiples&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;gradient-blue-green&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;gradient-light&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;gradient-grey-orange&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;gradient-sunset&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;gradient-dark&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;gradient-lemon&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;gradient-earth&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;gradient-horizon&quot;&gt;&lt;\/div&gt;\n&lt;!-- with hover .h-* --&gt;\n&lt;div class=&quot;gradient-ocean h-gradient-green-blue&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\"><div class=\"alert bg-primary-light mt-0\"><small class=\"text-primary\">Same Works on hover with <code>.h-gradient-* <\/code><\/small><\/div><\/div>\n\n\n<div class=\"line\"><\/div>\n\n<h3>Image Effects<\/h3>\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n\n<div class=\"wp-block-group row g-3 is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group col-6 col-md text-center is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group imagescale mb-2 is-layout-flow wp-block-group-is-layout-flow\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"300\" class=\"wp-image-1772\" src=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/1-39.jpg\" alt=\"Zoom out image effect on hover\" srcset=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/1-39.jpg 400w, https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/1-39-300x225.jpg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/div>\n\n<p class=\"mb-0 fw-medium wp-block-paragraph\">Zoom Out on Hover<\/p>\n<\/div>\n\n<div class=\"wp-block-group col-6 col-md text-center is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group imagescalein mb-2 is-layout-flow wp-block-group-is-layout-flow\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"300\" class=\"wp-image-1773\" src=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/2-36.jpg\" alt=\"Zoom in image effect on hover\" srcset=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/2-36.jpg 400w, https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/2-36-300x225.jpg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/div>\n\n<p class=\"mb-0 fw-medium wp-block-paragraph\">Zoom In on Hover<\/p>\n<\/div>\n\n<div class=\"wp-block-group col-6 col-md text-center is-layout-flow wp-block-group-is-layout-flow\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"300\" class=\"grayscale mb-2 wp-image-1774\" src=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/3-31.jpg\" alt=\"Color image turning to grayscale on hover\" srcset=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/3-31.jpg 400w, https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/3-31-300x225.jpg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/>\n<p class=\"mb-0 fw-medium wp-block-paragraph\">Destoy B\/W on Hover<\/p>\n<\/div>\n\n<div class=\"wp-block-group col-6 col-md text-center is-layout-flow wp-block-group-is-layout-flow\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"300\" class=\"grayscale-out mb-2 wp-image-1775\" src=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/4-23.jpg\" alt=\"Grayscale image turning to color on hover\" srcset=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/4-23.jpg 400w, https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/4-23-300x225.jpg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/>\n<p class=\"mb-0 fw-medium wp-block-paragraph\">B\/W on Hover<\/p>\n<\/div>\n<\/div>\n\n<\/div>\n\n<\/div>\n\n\n<div class=\"double-line line border-danger my-3\"><\/div>\n\n\n<div id=\"section-radius\" class=\"wp-block-group page-section py-6 my-0 is-layout-flow wp-block-group-is-layout-flow\">\n<h1>Border Radius<\/h1>\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n\n<div class=\"wp-block-group row g-3 is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"300\" class=\"square square-lg object-cover rounded-0 wp-image-1772\" src=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/1-39.jpg\" alt=\"Square image with no border radius\" srcset=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/1-39.jpg 400w, https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/1-39-300x225.jpg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"300\" class=\"square square-lg object-cover rounded-1 wp-image-1773\" src=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/2-36.jpg\" alt=\"Square styled with small border radius\" srcset=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/2-36.jpg 400w, https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/2-36-300x225.jpg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"300\" class=\"square square-lg object-cover rounded-2 wp-image-1774\" src=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/3-31.jpg\" alt=\"Square thumbnail with medium border radius\" srcset=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/3-31.jpg 400w, https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/3-31-300x225.jpg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"300\" class=\"square square-lg object-cover rounded-3 wp-image-1775\" src=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/4-23.jpg\" alt=\"Square thumbnail with large border radius\" srcset=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/4-23.jpg 400w, https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/4-23-300x225.jpg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"300\" class=\"square square-lg object-cover rounded-4 wp-image-1776\" src=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/5-23.jpg\" alt=\"Square thumbnail with extra large radius\" srcset=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/5-23.jpg 400w, https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/5-23-300x225.jpg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"615\" class=\"square square-lg object-cover rounded-5 wp-image-1777\" src=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/6-20.jpg\" alt=\"Square thumbnail with full border radius\" srcset=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/6-20.jpg 800w, https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/6-20-300x231.jpg 300w, https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/6-20-768x590.jpg 768w, https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/6-20-600x461.jpg 600w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"300\" class=\"square square-lg object-cover rounded-6 wp-image-1778\" src=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/7-18.jpg\" alt=\"Square thumbnail with maximum radius\" srcset=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/7-18.jpg 400w, https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/7-18-300x225.jpg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/div>\n<\/div>\n\n<\/div>\n\n<pre class=\"mt-4 p-4 rounded bg-light\"><code class=\"language-html\">&lt;img src=&quot;...&quot; class=&quot;rounded-0&quot; alt=&quot;...&quot;&gt;\n&lt;img src=&quot;...&quot; class=&quot;rounded-1&quot; alt=&quot;...&quot;&gt;\n&lt;img src=&quot;...&quot; class=&quot;rounded-2&quot; alt=&quot;...&quot;&gt;\n&lt;img src=&quot;...&quot; class=&quot;rounded-3&quot; alt=&quot;...&quot;&gt;\n&lt;img src=&quot;...&quot; class=&quot;rounded-4&quot; alt=&quot;...&quot;&gt;\n&lt;img src=&quot;...&quot; class=&quot;rounded-5&quot; alt=&quot;...&quot;&gt;\n&lt;img src=&quot;...&quot; class=&quot;rounded-6&quot; alt=&quot;...&quot;&gt;<\/code><\/pre>\n\n<div class=\"line\"><\/div>\n\n<h3>Rounded Variant<\/h3>\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n\n<div class=\"wp-block-group row g-3 is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"300\" class=\"square square-lg object-cover rounded wp-image-1772\" src=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/1-39.jpg\" alt=\"Thumbnail with rounded corners on all sides\" srcset=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/1-39.jpg 400w, https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/1-39-300x225.jpg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"300\" class=\"square square-lg object-cover rounded-top wp-image-1773\" src=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/2-36.jpg\" alt=\"Thumbnail with rounded top corners\" srcset=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/2-36.jpg 400w, https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/2-36-300x225.jpg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"300\" class=\"square square-lg object-cover rounded-end wp-image-1774\" src=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/3-31.jpg\" alt=\"Thumbnail with rounded right corners\" srcset=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/3-31.jpg 400w, https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/3-31-300x225.jpg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"300\" class=\"square square-lg object-cover rounded-bottom wp-image-1775\" src=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/4-23.jpg\" alt=\"Thumbnail with rounded bottom corners\" srcset=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/4-23.jpg 400w, https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/4-23-300x225.jpg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\"><img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"300\" class=\"square square-lg object-cover rounded-start wp-image-1776\" src=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/5-23.jpg\" alt=\"Thumbnail with rounded left corners\" srcset=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/5-23.jpg 400w, https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/5-23-300x225.jpg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/><\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"615\" class=\"square square-lg object-cover rounded-circle wp-image-1777\" src=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/6-20.jpg\" alt=\"Thumbnail cropped into a circle shape\" srcset=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/6-20.jpg 800w, https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/6-20-300x231.jpg 300w, https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/6-20-768x590.jpg 768w, https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/6-20-600x461.jpg 600w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\"><img loading=\"lazy\" decoding=\"async\" class=\"rounded-pill object-cover wp-image-1778\" src=\"https:\/\/demos.canvaswp.com\/classic\/wp-content\/uploads\/sites\/3\/2026\/07\/7-18.jpg\" alt=\"Thumbnail styled as a rounded pill shape\" style=\"height:100px\" width=\"170\" height=\"100\"><\/div>\n<\/div>\n\n<\/div>\n\n<pre class=\"mt-4 p-4 rounded bg-light\"><code class=\"language-html\">&lt;img src=&quot;...&quot; class=&quot;rounded&quot; alt=&quot;...&quot;&gt;\n&lt;img src=&quot;...&quot; class=&quot;rounded-top&quot; alt=&quot;...&quot;&gt;\n&lt;img src=&quot;...&quot; class=&quot;rounded-end&quot; alt=&quot;...&quot;&gt;\n&lt;img src=&quot;...&quot; class=&quot;rounded-bottom&quot; alt=&quot;...&quot;&gt;\n&lt;img src=&quot;...&quot; class=&quot;rounded-start&quot; alt=&quot;...&quot;&gt;\n&lt;img src=&quot;...&quot; class=&quot;rounded-circle&quot; alt=&quot;...&quot;&gt;\n&lt;img src=&quot;...&quot; class=&quot;rounded-pill&quot; alt=&quot;...&quot;&gt;<\/code><\/pre>\n<\/div>\n\n\n<div class=\"double-line line border-danger my-3\"><\/div>\n\n\n<div id=\"section-shadows\" class=\"wp-block-group page-section py-6 bg-white my-0 is-layout-flow wp-block-group-is-layout-flow\">\n<h1>Shadow<\/h1>\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n\n<div class=\"wp-block-group row g-3 is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-lg shadow-sm is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-lg shadow is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-lg shadow-lg is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-lg bg-light shadow-none is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n<\/div>\n\n<\/div>\n\n<pre class=\"mt-4 p-4 rounded bg-light\"><code class=\"language-html\">&lt;div class=&quot;shadow-sm&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;shadow&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;shadow-lg&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;shadow-none&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n\n<div class=\"line\"><\/div>\n\n<h3>On Hover<\/h3>\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n\n<div class=\"wp-block-group row g-3 is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-lg bg-light shadow-none shadow-ts h-shadow-sm is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-lg bg-light shadow-none shadow-ts h-shadow is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-lg bg-light shadow-none shadow-ts h-shadow-lg is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-lg bg-light shadow shadow-ts h-shadow-none is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n<\/div>\n\n<\/div>\n\n<pre class=\"mt-4 p-4 rounded bg-light\"><code class=\"language-html\">&lt;div class=&quot;shadow-none h-shadow-sm&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;shadow-none h-shadow&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;shadow-none h-shadow-lg&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;shadow h-shadow-none&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n<\/div>\n\n\n<div class=\"double-line line border-danger my-3\"><\/div>\n\n\n<div id=\"section-transforms\" class=\"wp-block-group page-section py-6 my-0 is-layout-flow wp-block-group-is-layout-flow\">\n<h1>Transforms<\/h1>\n\n<h3>Form Top And Bottom<\/h3>\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n\n<div class=\"wp-block-group row g-3 is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-lg bg-dark h-translate-y-sm transform-ts is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-lg bg-dark h-translate-y transform-ts is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-lg bg-dark h-translate-y-lg transform-ts is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto ms-3 is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-lg bg-dark h-translate-y-n-sm transform-ts is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-lg bg-dark h-translate-y-n transform-ts is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-lg bg-dark h-translate-y-n-lg transform-ts is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n<\/div>\n\n<\/div>\n\n<pre class=\"mt-4 p-4 rounded bg-light\"><code class=\"language-html\">&lt;div class=&quot;h-translate-y-sm transform-ts&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;h-translate-y transform-ts&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;h-translate-y-lg transform-ts&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;h-translate-y-n-sm transform-ts&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;h-translate-y-n transform-ts&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;h-translate-y-n-lg transform-ts&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n\n<div class=\"line\"><\/div>\n\n<h3>Form Left And Right<\/h3>\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n\n<div class=\"wp-block-group row g-3 is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-lg bg-dark h-translate-x-sm transform-ts is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-lg bg-dark h-translate-x transform-ts is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-lg bg-dark h-translate-x-lg transform-ts is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto ms-3 is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-lg bg-dark h-translate-x-n-sm transform-ts is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-lg bg-dark h-translate-x-n transform-ts is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-lg bg-dark h-translate-x-n-lg transform-ts is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n<\/div>\n\n<\/div>\n\n<pre class=\"mt-4 p-4 rounded bg-light\"><code class=\"language-html\">&lt;div class=&quot;h-translate-x-sm transform-ts&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;h-translate-x transform-ts&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;h-translate-x-lg transform-ts&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;h-translate-x-n-sm transform-ts&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;h-translate-x-n transform-ts&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;h-translate-x-n-lg transform-ts&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n\n<div class=\"line\"><\/div>\n\n<h3>Scale<\/h3>\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n\n<div class=\"wp-block-group row g-3 is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-lg bg-dark h-scale-sm transform-ts is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-lg bg-dark h-scale transform-ts is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-lg bg-dark h-scale-lg transform-ts is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-lg bg-dark h-scale-n-sm transform-ts is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-lg bg-dark h-scale-n transform-ts is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n\n<div class=\"wp-block-group col-auto is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-group square square-lg bg-dark h-scale-n-lg transform-ts is-layout-flow wp-block-group-is-layout-flow\"><\/div>\n<\/div>\n<\/div>\n\n<\/div>\n\n<pre class=\"mt-4 p-4 rounded bg-light\"><code class=\"language-html\">&lt;div class=&quot;h-scale-sm transform-ts&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;h-scale transform-ts&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;h-scale-lg transform-ts&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;h-scale-n-sm transform-ts&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;h-scale-n transform-ts&quot;&gt;&lt;\/div&gt;\n&lt;div class=&quot;h-scale-n-lg transform-ts&quot;&gt;&lt;\/div&gt;<\/code><\/pre>\n\n<div class=\"line\"><\/div>\n<\/div>\n\n\n<div class=\"double-line line border-danger my-3\"><\/div>\n\n\n<div id=\"section-sizes\" class=\"wp-block-group page-section py-6 my-0 is-layout-flow wp-block-group-is-layout-flow\">\n<h1>Sizes<\/h1>\n\n<h3>Square Box Sizes<\/h3>\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"row g-3\"><div class=\"col-auto\"><div class=\"square square-xs bg-danger-light\"><\/div><\/div><div class=\"col-auto\"><div class=\"square square-sm bg-danger-light\"><\/div><\/div><div class=\"col-auto\"><div class=\"square square-md bg-danger-light\"><\/div><\/div><div class=\"col-auto\"><div class=\"square square-lg bg-danger-light\"><\/div><\/div><div class=\"col-auto\"><div class=\"square square-xl bg-danger-light\"><\/div><\/div><div class=\"col-auto\"><div style=\"--cnvs-square-size: 10rem\" class=\"square bg-danger-light\"><\/div><\/div><div class=\"col-auto\"><div style=\"--cnvs-square-size: 9rem\" class=\"square bg-danger-light\"><\/div><\/div><\/div><\/div>\n\n<pre class=\"mt-4 p-4 rounded bg-light\"><code class=\"language-html\">&#x3C;div class=&#x22;square square-xs&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x3C;div class=&#x22;square square-sm&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x3C;div class=&#x22;square square-md&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x3C;div class=&#x22;square square-lg&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x3C;div class=&#x22;square square-xl&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x3C;div class=&#x22;square&#x22; style=&#x22;--cnvs-square-size: 10rem;&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x3C;div class=&#x22;square&#x22; style=&#x22;--cnvs-square-size: 9rem;&#x22;&#x3E;&#x3C;\/div&#x3E;<\/code><\/pre>\n\n<div class=\"line\"><\/div>\n\n<h1>Max Widths<\/h1>\n\n<pre class=\"mt-4 p-4 rounded bg-light\"><code class=\"language-html\">&#x3C;div class=&#x22;mw-xs mx-auto&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x3C;div class=&#x22;mw-sm mx-auto&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x3C;div class=&#x22;mw-md mx-auto&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x3C;div class=&#x22;mw-lg mx-auto&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x3C;div class=&#x22;mw-xl mx-auto&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x3C;div class=&#x22;mw-xxl mx-auto&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x3C;div class=&#x22;mw-custom mx-auto&#x22; style=&#x22;--cnvs-mw-custom: 50%;&#x22;&#x3E;&#x3C;\/div&#x3E;<\/code><\/pre>\n<\/div>\n\n\n<div class=\"double-line line border-danger my-3\"><\/div>\n\n\n<div id=\"section-gutters\" class=\"wp-block-group page-section py-6 my-0 is-layout-flow wp-block-group-is-layout-flow\">\n<h1>Gutters<\/h1>\n\n\n<div class=\"wp-block-group is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"row gutter-20 gutter-md-30 mb-5\"><div class=\"col-3\"><div style=\"height:4rem\" class=\"w-100 bg-primary-light\"><\/div><\/div><div class=\"col-3\"><div style=\"height:4rem\" class=\"w-100 bg-primary-light\"><\/div><\/div><div class=\"col-3\"><div style=\"height:4rem\" class=\"w-100 bg-primary-light\"><\/div><\/div><div class=\"col-3\"><div style=\"height:4rem\" class=\"w-100 bg-primary-light\"><\/div><\/div><div class=\"col-3\"><div style=\"height:4rem\" class=\"w-100 bg-primary-light\"><\/div><\/div><div class=\"col-3\"><div style=\"height:4rem\" class=\"w-100 bg-primary-light\"><\/div><\/div><div class=\"col-3\"><div style=\"height:4rem\" class=\"w-100 bg-primary-light\"><\/div><\/div><div class=\"col-3\"><div style=\"height:4rem\" class=\"w-100 bg-primary-light\"><\/div><\/div><\/div><\/div>\n\n<pre class=\"mt-4 p-4 rounded bg-light\"><code class=\"language-html\">&#x3C;!-- Gutter classes can be added to .row DIV. In the following example, we use responsive gutter classes.\n.gutter-10 is for 10px. EX: .gutter-10\/20\/30\/40\/50 or use style=&#x22;--cnvs-custom-gutter: *px;&#x22; --&#x3E;\n\n&#x3C;div class=&#x22;row gutter-20 gutter-md-30 mb-5&#x22;&#x3E;\n&#x9;&#x3C;div class=&#x22;col-3&#x22;&#x3E;\n&#x9;&#x9;&#x3C;div class=&#x22;w-100 bg-primary-light&#x22; style=&#x22;height:4rem;&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x9;&#x3C;\/div&#x3E;\n&#x9;&#x3C;div class=&#x22;col-3&#x22;&#x3E;\n&#x9;&#x9;&#x3C;div class=&#x22;w-100 bg-primary-light&#x22; style=&#x22;height:4rem;&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x9;&#x3C;\/div&#x3E;\n&#x9;&#x3C;div class=&#x22;col-3&#x22;&#x3E;\n&#x9;&#x9;&#x3C;div class=&#x22;w-100 bg-primary-light&#x22; style=&#x22;height:4rem;&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x9;&#x3C;\/div&#x3E;\n&#x9;&#x3C;div class=&#x22;col-3&#x22;&#x3E;\n&#x9;&#x9;&#x3C;div class=&#x22;w-100 bg-primary-light&#x22; style=&#x22;height:4rem;&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x9;&#x3C;\/div&#x3E;\n&#x9;&#x3C;div class=&#x22;col-3&#x22;&#x3E;\n&#x9;&#x9;&#x3C;div class=&#x22;w-100 bg-primary-light&#x22; style=&#x22;height:4rem;&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x9;&#x3C;\/div&#x3E;\n&#x9;&#x3C;div class=&#x22;col-3&#x22;&#x3E;\n&#x9;&#x9;&#x3C;div class=&#x22;w-100 bg-primary-light&#x22; style=&#x22;height:4rem;&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x9;&#x3C;\/div&#x3E;\n&#x9;&#x3C;div class=&#x22;col-3&#x22;&#x3E;\n&#x9;&#x9;&#x3C;div class=&#x22;w-100 bg-primary-light&#x22; style=&#x22;height:4rem;&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x9;&#x3C;\/div&#x3E;\n&#x9;&#x3C;div class=&#x22;col-3&#x22;&#x3E;\n&#x9;&#x9;&#x3C;div class=&#x22;w-100 bg-primary-light&#x22; style=&#x22;height:4rem;&#x22;&#x3E;&#x3C;\/div&#x3E;\n&#x9;&#x3C;\/div&#x3E;\n&#x3C;\/div&#x3E;<\/code><\/pre>\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Border utilities let you quickly add or remove borders, control their width and color, and round corners on any element. Use these helper classes to style edges without writing custom CSS. Display 1 Display 2 Display 3 Display 4 Display 5 Display 6 h1 heading h2 heading h3 heading h4 heading h5 heading h6 heading [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-canvas","meta":{"footnotes":""},"class_list":["post-1634","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/pages\/1634","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/comments?post=1634"}],"version-history":[{"count":5,"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/pages\/1634\/revisions"}],"predecessor-version":[{"id":2075,"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/pages\/1634\/revisions\/2075"}],"wp:attachment":[{"href":"https:\/\/demos.canvaswp.com\/classic\/wp-json\/wp\/v2\/media?parent=1634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}