npm - @gemboss/ui - Versions diffs - 0.21.0 → 0.30.2 - Mend

@gemboss/ui 0.21.0 → 0.30.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (57) hide show

package/CHANGELOG.md +328 -0
package/README.md +433 -24
package/catalog/editor.html +426 -10
package/catalog/index.html +907 -33
package/gemboss-ui.css +3 -3
package/package.json +23 -3
package/parts/components.css +5 -0
package/parts/core.css +5 -0
package/parts/shell.css +5 -0
package/src/action-card.css +1 -0
package/src/action-card.tsx +149 -0
package/src/app-shell.css +1 -1
package/src/assistant/chat-markdown.ts +279 -0
package/src/assistant/chat-turns.ts +120 -0
package/src/assistant/chat.tsx +871 -0
package/src/assistant/engine-mark-art.ts +45 -0
package/src/assistant/engine-mark.tsx +39 -0
package/src/assistant/engine.tsx +697 -0
package/src/assistant/host.tsx +3 -1
package/src/assistant/index.ts +6 -0
package/src/assistant-chat.css +1 -0
package/src/assistant-engine.css +1 -0
package/src/auth.css +1 -1
package/src/auth.tsx +18 -2
package/src/chat-composer.css +1 -1
package/src/chat-plain.js +6 -0
package/src/chat.css +1 -1
package/src/collections.tsx +1 -0
package/src/dialog.tsx +3 -135
package/src/editor/controls.tsx +1 -0
package/src/editor/frame.tsx +12 -4
package/src/editor/index.ts +10 -1
package/src/editor/layers.tsx +136 -0
package/src/editor/panel.tsx +1 -0
package/src/editor/panes.tsx +4 -3
package/src/editor/sortable.tsx +79 -0
package/src/editor/tree.tsx +61 -0
package/src/editor-layers-plain.js +1 -0
package/src/editor.css +1 -1
package/src/engine-plain.js +1 -0
package/src/index-table.tsx +1 -0
package/src/index.ts +8 -3
package/src/kit-plain.css +1 -1
package/src/kit-plain.js +1 -1
package/src/launcher.tsx +1 -0
package/src/menu-layer.ts +9 -2
package/src/minichart.css +1 -0
package/src/minichart.tsx +165 -0
package/src/portal.tsx +1 -0
package/src/reactions.tsx +1 -0
package/src/resource-list-select.tsx +1 -0
package/src/search-dialog.tsx +146 -0
package/src/selection.tsx +1 -0
package/src/setup-guide.css +1 -0
package/src/setup-guide.tsx +116 -0
package/src/theme-script.ts +10 -0
package/src/theme.tsx +5 -5

package/catalog/editor.html CHANGED Viewed

@@ -8,7 +8,7 @@
 .cat-code summary{padding:10px 16px;font-size:13px;cursor:pointer;color:var(--gemboss-text-muted);border-top:1px solid var(--gemboss-divider);min-height:24px}
 .cat-code pre,.cat-api{margin:0;padding:12px 16px;overflow:auto;background:#0f1012;color:#e8e8e6;font-size:12px;line-height:1.5;border-radius:0}
 .cat-api{border-radius:12px;margin:0 0 16px}</style></head><body><div class="cat">
-<h1>@gemboss/ui 0.21.0 · Editor</h1>
+<h1>@gemboss/ui 0.30.2 · Editor</h1>
 <p>Khung của mọi editor: <code>EditorFrame</code> (cột trái · khe kéo · preview · cột phải dock trên mép phải preview) và <code>EditorTopbar</code> (← · tiêu đề · cụm giữa · cụm phải · dòng trạng thái). Là đúng khung của theme / page / section editor trong admin. Gói chỉ vẽ KHUNG; chat, Configure, canvas, page picker, menu, Publish là của editor, đi vào bằng slot. Trang HTML thuần nạp <code>editor.css</code> + <code>editor-plain.js</code> rồi gọi <code>gembossUI.initEditorFrame()</code>: kéo khe (chuột, chạm, phím mũi tên / Home / End), đổi thiết bị, mở ⋯ và Publish ▾, ẩn cột trái, Chat | Preview trên điện thoại. <a href="index.html">← Catalog</a></p>
 <h2>React</h2><pre class="cat-api"><code>import &quot;@gemboss/ui/editor.css&quot;;
 import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs, EditorSaveState, DeviceToggle } from &quot;@gemboss/ui/editor&quot;;
@@ -29,15 +29,18 @@ import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs
 …the markup below…
 &lt;script src=&quot;…/@gemboss/ui/src/kit-plain.js&quot;&gt;&lt;/script&gt;
 &lt;script src=&quot;…/@gemboss/ui/src/editor-plain.js&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;…/@gemboss/ui/src/editor-layers-plain.js&quot;&gt;&lt;/script&gt;   &lt;!-- 0.22.0, only where layers / drawers are --&gt;
 &lt;script&gt;
   gembossUI.initEditorFrame();
   gembossUI.initEditorPanel();   // 0.17.0: tabs, groups, Seg, colour, range, edges, image
+  gembossUI.initEditorLayers();  // 0.22.0: layers (select, hide, drag / Alt+↑↓), the element outline, drawers
+  addEventListener(&quot;gemboss:editor-layer-move&quot;, (e) =&gt; save(e.detail.id, e.detail.to));
   addEventListener(&quot;gemboss:editor-device&quot;, (e) =&gt; setCanvasWidth(e.detail.device));
   addEventListener(&quot;gemboss:editor-split&quot;, (e) =&gt; save(e.detail.width));
   addEventListener(&quot;gemboss:editor-edges&quot;, (e) =&gt; save(e.target.dataset.name, e.detail)); // {t, r, b, l}
 &lt;/script&gt;</code></pre>
 <h2>Builder: lớp trái, canvas, preset phải</h2>
-<figure class="cat-demo"><figcaption>1280: kéo khe giữa, bấm ⋯ / ▾ / thiết bị / biểu tượng cột trái</figcaption><div class="cat-wide"><iframe title="1280: kéo khe giữa, bấm ⋯ / ▾ / thiết bị / biểu tượng cột trái" style="width:1280px;height:560px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/editor.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-editor&quot;&gt;&lt;header class=&quot;gemboss-editor-topbar gemboss-editor-topbar--theme&quot;&gt;&lt;div class=&quot;gemboss-editor-tb-left&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;gemboss-editor-back&quot; aria-label=&quot;Back&quot;&gt;←&lt;/a&gt;&lt;button class=&quot;gemboss-editor-chat-toggle&quot; aria-pressed=&quot;false&quot; title=&quot;Hide chat — full-width preview&quot; aria-label=&quot;Hide chat panel&quot;&gt;&lt;svg viewBox=&quot;0 0 16 16&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;1.75&quot; y=&quot;2.75&quot; width=&quot;12.5&quot; height=&quot;10.5&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;6.25&quot; y1=&quot;2.75&quot; x2=&quot;6.25&quot; y2=&quot;13.25&quot;&gt;&lt;/line&gt;&lt;rect x=&quot;1.75&quot; y=&quot;2.75&quot; width=&quot;4.5&quot; height=&quot;10.5&quot; fill=&quot;currentColor&quot; stroke=&quot;none&quot;&gt;&lt;/rect&gt;&lt;/svg&gt;&lt;/button&gt;&lt;span class=&quot;gemboss-editor-tb-name&quot;&gt;Builder&lt;/span&gt;&lt;span class=&quot;gemboss-editor-savestate is-saved&quot; role=&quot;status&quot; aria-live=&quot;polite&quot; title=&quot;Every change is saved to the draft automatically&quot;&gt;✓ Draft saved · 10:42&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-tb-center&quot;&gt;&lt;div class=&quot;ui-seg gemboss-pv-devices&quot; role=&quot;group&quot; aria-label=&quot;Device&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device active&quot; aria-label=&quot;Desktop&quot; title=&quot;Desktop&quot; aria-pressed=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;2.5&quot; y=&quot;4&quot; width=&quot;19&quot; height=&quot;12&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;9&quot; y1=&quot;20.5&quot; x2=&quot;15&quot; y2=&quot;20.5&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;12&quot; y1=&quot;16&quot; x2=&quot;12&quot; y2=&quot;20.5&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device&quot; aria-label=&quot;Tablet&quot; title=&quot;Tablet&quot; aria-pressed=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;4&quot; y=&quot;3&quot; width=&quot;16&quot; height=&quot;18&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;10.5&quot; y1=&quot;18&quot; x2=&quot;13.5&quot; y2=&quot;18&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device&quot; aria-label=&quot;Mobile&quot; title=&quot;Mobile&quot; aria-pressed=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;6.5&quot; y=&quot;2.5&quot; width=&quot;11&quot; height=&quot;19&quot; rx=&quot;2.5&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;10.5&quot; y1=&quot;18.5&quot; x2=&quot;13.5&quot; y2=&quot;18.5&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-tb-right&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-ghost&quot;&gt;＋ Add section&lt;/button&gt;&lt;div class=&quot;gemboss-editor-overflow&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device gemboss-editor-overflow-trigger&quot; aria-haspopup=&quot;menu&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More actions&quot; title=&quot;More actions&quot;&gt;⋯&lt;/button&gt;&lt;div class=&quot;gemboss-popover-surface gemboss-editor-menu&quot; role=&quot;menu&quot; hidden&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;&lt;span&gt;Duplicate&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;&lt;span&gt;Export HTML&lt;/span&gt;&lt;/button&gt;&lt;div class=&quot;gemboss-editor-menu-sep&quot; role=&quot;separator&quot;&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;&lt;span&gt;Delete&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-publish&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-publish gemboss-editor-publish-main&quot;&gt;Publish&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-publish gemboss-editor-publish-caret&quot; aria-haspopup=&quot;menu&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Choose deploy target&quot;&gt;▾&lt;/button&gt;&lt;div class=&quot;gemboss-popover-surface gemboss-editor-menu&quot; role=&quot;menu&quot; hidden&gt;&lt;div class=&quot;gemboss-editor-menu-label&quot; aria-hidden=&quot;true&quot;&gt;Target&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;&lt;span&gt;Deploy preview&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;&lt;span&gt;Publish live&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/header&gt;&lt;div class=&quot;gemboss-editor-body&quot; data-mobile-pane=&quot;chat&quot; style=&quot;--gemboss-chat-w:320px&quot;&gt;&lt;div class=&quot;gemboss-ec&quot;&gt;&lt;div class=&quot;gemboss-ec-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Editor panels&quot;&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;true&quot;&gt;Layers&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;false&quot;&gt;Chat&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ec-dock-body&quot;&gt;Hero · Logos · Benefits · Reviews · FAQ&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-resizer ui-resizer&quot; role=&quot;separator&quot; aria-orientation=&quot;vertical&quot; aria-label=&quot;Resize layers panel&quot; aria-valuenow=&quot;320&quot; aria-valuemin=&quot;300&quot; aria-valuemax=&quot;680&quot; tabindex=&quot;0&quot;&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-preview-pane&quot;&gt;&lt;div class=&quot;gemboss-editor-dock&quot;&gt;&lt;div style=&quot;padding:16px&quot;&gt;&lt;b&gt;Presets&lt;/b&gt;&lt;p style=&quot;color:var(--gemboss-text-muted);margin:8px 0 0&quot;&gt;The right column: docked over the preview, 320px.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-pv-frame gemboss-pv-fit desktop&quot; style=&quot;display:grid;place-items:center;color:var(--gemboss-text-muted)&quot;&gt;Canvas&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-mobile-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Editor panes&quot;&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; aria-selected=&quot;true&quot; class=&quot;gemboss-editor-mobile-tab active&quot;&gt;Layers&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; aria-selected=&quot;false&quot; class=&quot;gemboss-editor-mobile-tab&quot;&gt;Preview&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;script src=&quot;../src/kit-plain.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;../src/editor-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorFrame()&lt;/script&gt;&lt;script&gt;gembossUI.initEditorPanel()&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-editor&quot;&gt;
+<figure class="cat-demo"><figcaption>1280: kéo khe giữa, bấm ⋯ / ▾ / thiết bị / biểu tượng cột trái</figcaption><div class="cat-wide"><iframe title="1280: kéo khe giữa, bấm ⋯ / ▾ / thiết bị / biểu tượng cột trái" style="width:1280px;height:560px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/editor.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-editor&quot;&gt;&lt;header class=&quot;gemboss-editor-topbar gemboss-editor-topbar--theme&quot;&gt;&lt;div class=&quot;gemboss-editor-tb-left&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;gemboss-editor-back&quot; aria-label=&quot;Back&quot;&gt;←&lt;/a&gt;&lt;button class=&quot;gemboss-editor-chat-toggle&quot; aria-pressed=&quot;false&quot; title=&quot;Hide chat — full-width preview&quot; aria-label=&quot;Hide chat panel&quot;&gt;&lt;svg viewBox=&quot;0 0 16 16&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;1.75&quot; y=&quot;2.75&quot; width=&quot;12.5&quot; height=&quot;10.5&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;6.25&quot; y1=&quot;2.75&quot; x2=&quot;6.25&quot; y2=&quot;13.25&quot;&gt;&lt;/line&gt;&lt;rect x=&quot;1.75&quot; y=&quot;2.75&quot; width=&quot;4.5&quot; height=&quot;10.5&quot; fill=&quot;currentColor&quot; stroke=&quot;none&quot;&gt;&lt;/rect&gt;&lt;/svg&gt;&lt;/button&gt;&lt;span class=&quot;gemboss-editor-tb-name&quot;&gt;Builder&lt;/span&gt;&lt;span class=&quot;gemboss-editor-savestate is-saved&quot; role=&quot;status&quot; aria-live=&quot;polite&quot; title=&quot;Every change is saved to the draft automatically&quot;&gt;✓ Draft saved · 10:42&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-tb-center&quot;&gt;&lt;div class=&quot;ui-seg gemboss-pv-devices&quot; role=&quot;group&quot; aria-label=&quot;Device&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device active&quot; aria-label=&quot;Desktop&quot; title=&quot;Desktop&quot; aria-pressed=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;2.5&quot; y=&quot;4&quot; width=&quot;19&quot; height=&quot;12&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;9&quot; y1=&quot;20.5&quot; x2=&quot;15&quot; y2=&quot;20.5&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;12&quot; y1=&quot;16&quot; x2=&quot;12&quot; y2=&quot;20.5&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device&quot; aria-label=&quot;Tablet&quot; title=&quot;Tablet&quot; aria-pressed=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;4&quot; y=&quot;3&quot; width=&quot;16&quot; height=&quot;18&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;10.5&quot; y1=&quot;18&quot; x2=&quot;13.5&quot; y2=&quot;18&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device&quot; aria-label=&quot;Mobile&quot; title=&quot;Mobile&quot; aria-pressed=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;6.5&quot; y=&quot;2.5&quot; width=&quot;11&quot; height=&quot;19&quot; rx=&quot;2.5&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;10.5&quot; y1=&quot;18.5&quot; x2=&quot;13.5&quot; y2=&quot;18.5&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-tb-right&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-ghost&quot;&gt;＋ Add section&lt;/button&gt;&lt;div class=&quot;gemboss-editor-overflow&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device gemboss-editor-overflow-trigger&quot; aria-haspopup=&quot;menu&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More actions&quot; title=&quot;More actions&quot;&gt;⋯&lt;/button&gt;&lt;div class=&quot;gemboss-popover-surface gemboss-editor-menu&quot; role=&quot;menu&quot; hidden&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;&lt;span&gt;Duplicate&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;&lt;span&gt;Export HTML&lt;/span&gt;&lt;/button&gt;&lt;div class=&quot;gemboss-editor-menu-sep&quot; role=&quot;separator&quot;&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;&lt;span&gt;Delete&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-publish&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-publish gemboss-editor-publish-main&quot;&gt;Publish&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-publish gemboss-editor-publish-caret&quot; aria-haspopup=&quot;menu&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Choose deploy target&quot;&gt;▾&lt;/button&gt;&lt;div class=&quot;gemboss-popover-surface gemboss-editor-menu&quot; role=&quot;menu&quot; hidden&gt;&lt;div class=&quot;gemboss-editor-menu-label&quot; aria-hidden=&quot;true&quot;&gt;Target&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;&lt;span&gt;Deploy preview&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;&lt;span&gt;Publish live&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/header&gt;&lt;div class=&quot;gemboss-editor-body&quot; data-mobile-pane=&quot;chat&quot; style=&quot;--gemboss-chat-w:320px&quot;&gt;&lt;div class=&quot;gemboss-ec&quot;&gt;&lt;div class=&quot;gemboss-ec-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Editor panels&quot;&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;true&quot;&gt;Layers&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;false&quot;&gt;Chat&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ec-dock-body&quot;&gt;Hero · Logos · Benefits · Reviews · FAQ&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-resizer ui-resizer&quot; role=&quot;separator&quot; aria-orientation=&quot;vertical&quot; aria-label=&quot;Resize layers panel&quot; aria-valuenow=&quot;320&quot; aria-valuemin=&quot;300&quot; aria-valuemax=&quot;680&quot; tabindex=&quot;0&quot;&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-preview-pane&quot;&gt;&lt;div class=&quot;gemboss-editor-dock&quot;&gt;&lt;div style=&quot;padding:16px&quot;&gt;&lt;b&gt;Presets&lt;/b&gt;&lt;p style=&quot;color:var(--gemboss-text-muted);margin:8px 0 0&quot;&gt;The right column: docked over the preview, 320px.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-pv-frame gemboss-pv-fit desktop&quot; style=&quot;display:grid;place-items:center;color:var(--gemboss-text-muted)&quot;&gt;Canvas&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-mobile-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Editor panes&quot;&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; aria-selected=&quot;true&quot; class=&quot;gemboss-editor-mobile-tab active&quot;&gt;Layers&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; aria-selected=&quot;false&quot; class=&quot;gemboss-editor-mobile-tab&quot;&gt;Preview&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;script src=&quot;../src/kit-plain.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;../src/editor-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorFrame()&lt;/script&gt;&lt;script&gt;gembossUI.initEditorPanel()&lt;/script&gt;&lt;script src=&quot;../src/editor-layers-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorLayers()&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-editor&quot;&gt;
   &lt;header class=&quot;gemboss-editor-topbar gemboss-editor-topbar--theme&quot;&gt;
     &lt;div class=&quot;gemboss-editor-tb-left&quot;&gt;
       &lt;a href=&quot;#&quot; class=&quot;gemboss-editor-back&quot; aria-label=&quot;Back&quot;&gt;←&lt;/a&gt;
@@ -142,7 +145,7 @@ import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs
   &lt;button type=&quot;button&quot; role=&quot;tab&quot; aria-selected=&quot;false&quot; class=&quot;gemboss-editor-mobile-tab&quot;&gt;Preview&lt;/button&gt;
 &lt;/div&gt;
 &lt;/div&gt;</code></pre></details></figure>
-<figure class="cat-demo"><figcaption>390: hai hàng trên topbar, Layers | Preview ở đáy</figcaption><div class="cat-wide"><iframe title="390: hai hàng trên topbar, Layers | Preview ở đáy" style="width:390px;height:700px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/editor.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-editor&quot;&gt;&lt;header class=&quot;gemboss-editor-topbar gemboss-editor-topbar--theme&quot;&gt;&lt;div class=&quot;gemboss-editor-tb-left&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;gemboss-editor-back&quot; aria-label=&quot;Back&quot;&gt;←&lt;/a&gt;&lt;button class=&quot;gemboss-editor-chat-toggle&quot; aria-pressed=&quot;false&quot; title=&quot;Hide chat — full-width preview&quot; aria-label=&quot;Hide chat panel&quot;&gt;&lt;svg viewBox=&quot;0 0 16 16&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;1.75&quot; y=&quot;2.75&quot; width=&quot;12.5&quot; height=&quot;10.5&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;6.25&quot; y1=&quot;2.75&quot; x2=&quot;6.25&quot; y2=&quot;13.25&quot;&gt;&lt;/line&gt;&lt;rect x=&quot;1.75&quot; y=&quot;2.75&quot; width=&quot;4.5&quot; height=&quot;10.5&quot; fill=&quot;currentColor&quot; stroke=&quot;none&quot;&gt;&lt;/rect&gt;&lt;/svg&gt;&lt;/button&gt;&lt;span class=&quot;gemboss-editor-tb-name&quot;&gt;Builder&lt;/span&gt;&lt;span class=&quot;gemboss-editor-savestate is-saved&quot; role=&quot;status&quot; aria-live=&quot;polite&quot; title=&quot;Every change is saved to the draft automatically&quot;&gt;✓ Draft saved · 10:42&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-tb-center&quot;&gt;&lt;div class=&quot;ui-seg gemboss-pv-devices&quot; role=&quot;group&quot; aria-label=&quot;Device&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device active&quot; aria-label=&quot;Desktop&quot; title=&quot;Desktop&quot; aria-pressed=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;2.5&quot; y=&quot;4&quot; width=&quot;19&quot; height=&quot;12&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;9&quot; y1=&quot;20.5&quot; x2=&quot;15&quot; y2=&quot;20.5&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;12&quot; y1=&quot;16&quot; x2=&quot;12&quot; y2=&quot;20.5&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device&quot; aria-label=&quot;Tablet&quot; title=&quot;Tablet&quot; aria-pressed=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;4&quot; y=&quot;3&quot; width=&quot;16&quot; height=&quot;18&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;10.5&quot; y1=&quot;18&quot; x2=&quot;13.5&quot; y2=&quot;18&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device&quot; aria-label=&quot;Mobile&quot; title=&quot;Mobile&quot; aria-pressed=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;6.5&quot; y=&quot;2.5&quot; width=&quot;11&quot; height=&quot;19&quot; rx=&quot;2.5&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;10.5&quot; y1=&quot;18.5&quot; x2=&quot;13.5&quot; y2=&quot;18.5&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-tb-right&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-ghost&quot;&gt;＋ Add section&lt;/button&gt;&lt;div class=&quot;gemboss-editor-overflow&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device gemboss-editor-overflow-trigger&quot; aria-haspopup=&quot;menu&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More actions&quot; title=&quot;More actions&quot;&gt;⋯&lt;/button&gt;&lt;div class=&quot;gemboss-popover-surface gemboss-editor-menu&quot; role=&quot;menu&quot; hidden&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;&lt;span&gt;Duplicate&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;&lt;span&gt;Export HTML&lt;/span&gt;&lt;/button&gt;&lt;div class=&quot;gemboss-editor-menu-sep&quot; role=&quot;separator&quot;&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;&lt;span&gt;Delete&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-publish&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-publish gemboss-editor-publish-main&quot;&gt;Publish&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-publish gemboss-editor-publish-caret&quot; aria-haspopup=&quot;menu&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Choose deploy target&quot;&gt;▾&lt;/button&gt;&lt;div class=&quot;gemboss-popover-surface gemboss-editor-menu&quot; role=&quot;menu&quot; hidden&gt;&lt;div class=&quot;gemboss-editor-menu-label&quot; aria-hidden=&quot;true&quot;&gt;Target&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;&lt;span&gt;Deploy preview&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;&lt;span&gt;Publish live&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/header&gt;&lt;div class=&quot;gemboss-editor-body&quot; data-mobile-pane=&quot;chat&quot; style=&quot;--gemboss-chat-w:320px&quot;&gt;&lt;div class=&quot;gemboss-ec&quot;&gt;&lt;div class=&quot;gemboss-ec-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Editor panels&quot;&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;true&quot;&gt;Layers&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;false&quot;&gt;Chat&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ec-dock-body&quot;&gt;Hero · Logos · Benefits · Reviews · FAQ&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-resizer ui-resizer&quot; role=&quot;separator&quot; aria-orientation=&quot;vertical&quot; aria-label=&quot;Resize layers panel&quot; aria-valuenow=&quot;320&quot; aria-valuemin=&quot;300&quot; aria-valuemax=&quot;680&quot; tabindex=&quot;0&quot;&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-preview-pane&quot;&gt;&lt;div class=&quot;gemboss-editor-dock&quot;&gt;&lt;div style=&quot;padding:16px&quot;&gt;&lt;b&gt;Presets&lt;/b&gt;&lt;p style=&quot;color:var(--gemboss-text-muted);margin:8px 0 0&quot;&gt;The right column: docked over the preview, 320px.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-pv-frame gemboss-pv-fit desktop&quot; style=&quot;display:grid;place-items:center;color:var(--gemboss-text-muted)&quot;&gt;Canvas&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-mobile-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Editor panes&quot;&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; aria-selected=&quot;true&quot; class=&quot;gemboss-editor-mobile-tab active&quot;&gt;Layers&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; aria-selected=&quot;false&quot; class=&quot;gemboss-editor-mobile-tab&quot;&gt;Preview&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;script src=&quot;../src/kit-plain.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;../src/editor-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorFrame()&lt;/script&gt;&lt;script&gt;gembossUI.initEditorPanel()&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-editor&quot;&gt;
+<figure class="cat-demo"><figcaption>390: hai hàng trên topbar, Layers | Preview ở đáy</figcaption><div class="cat-wide"><iframe title="390: hai hàng trên topbar, Layers | Preview ở đáy" style="width:390px;height:700px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/editor.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-editor&quot;&gt;&lt;header class=&quot;gemboss-editor-topbar gemboss-editor-topbar--theme&quot;&gt;&lt;div class=&quot;gemboss-editor-tb-left&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;gemboss-editor-back&quot; aria-label=&quot;Back&quot;&gt;←&lt;/a&gt;&lt;button class=&quot;gemboss-editor-chat-toggle&quot; aria-pressed=&quot;false&quot; title=&quot;Hide chat — full-width preview&quot; aria-label=&quot;Hide chat panel&quot;&gt;&lt;svg viewBox=&quot;0 0 16 16&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;1.75&quot; y=&quot;2.75&quot; width=&quot;12.5&quot; height=&quot;10.5&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;6.25&quot; y1=&quot;2.75&quot; x2=&quot;6.25&quot; y2=&quot;13.25&quot;&gt;&lt;/line&gt;&lt;rect x=&quot;1.75&quot; y=&quot;2.75&quot; width=&quot;4.5&quot; height=&quot;10.5&quot; fill=&quot;currentColor&quot; stroke=&quot;none&quot;&gt;&lt;/rect&gt;&lt;/svg&gt;&lt;/button&gt;&lt;span class=&quot;gemboss-editor-tb-name&quot;&gt;Builder&lt;/span&gt;&lt;span class=&quot;gemboss-editor-savestate is-saved&quot; role=&quot;status&quot; aria-live=&quot;polite&quot; title=&quot;Every change is saved to the draft automatically&quot;&gt;✓ Draft saved · 10:42&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-tb-center&quot;&gt;&lt;div class=&quot;ui-seg gemboss-pv-devices&quot; role=&quot;group&quot; aria-label=&quot;Device&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device active&quot; aria-label=&quot;Desktop&quot; title=&quot;Desktop&quot; aria-pressed=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;2.5&quot; y=&quot;4&quot; width=&quot;19&quot; height=&quot;12&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;9&quot; y1=&quot;20.5&quot; x2=&quot;15&quot; y2=&quot;20.5&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;12&quot; y1=&quot;16&quot; x2=&quot;12&quot; y2=&quot;20.5&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device&quot; aria-label=&quot;Tablet&quot; title=&quot;Tablet&quot; aria-pressed=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;4&quot; y=&quot;3&quot; width=&quot;16&quot; height=&quot;18&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;10.5&quot; y1=&quot;18&quot; x2=&quot;13.5&quot; y2=&quot;18&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device&quot; aria-label=&quot;Mobile&quot; title=&quot;Mobile&quot; aria-pressed=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;6.5&quot; y=&quot;2.5&quot; width=&quot;11&quot; height=&quot;19&quot; rx=&quot;2.5&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;10.5&quot; y1=&quot;18.5&quot; x2=&quot;13.5&quot; y2=&quot;18.5&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-tb-right&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-ghost&quot;&gt;＋ Add section&lt;/button&gt;&lt;div class=&quot;gemboss-editor-overflow&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device gemboss-editor-overflow-trigger&quot; aria-haspopup=&quot;menu&quot; aria-expanded=&quot;false&quot; aria-label=&quot;More actions&quot; title=&quot;More actions&quot;&gt;⋯&lt;/button&gt;&lt;div class=&quot;gemboss-popover-surface gemboss-editor-menu&quot; role=&quot;menu&quot; hidden&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;&lt;span&gt;Duplicate&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;&lt;span&gt;Export HTML&lt;/span&gt;&lt;/button&gt;&lt;div class=&quot;gemboss-editor-menu-sep&quot; role=&quot;separator&quot;&gt;&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;&lt;span&gt;Delete&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-publish&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-publish gemboss-editor-publish-main&quot;&gt;Publish&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-publish gemboss-editor-publish-caret&quot; aria-haspopup=&quot;menu&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Choose deploy target&quot;&gt;▾&lt;/button&gt;&lt;div class=&quot;gemboss-popover-surface gemboss-editor-menu&quot; role=&quot;menu&quot; hidden&gt;&lt;div class=&quot;gemboss-editor-menu-label&quot; aria-hidden=&quot;true&quot;&gt;Target&lt;/div&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;&lt;span&gt;Deploy preview&lt;/span&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-menu-item&quot; role=&quot;menuitem&quot;&gt;&lt;span&gt;Publish live&lt;/span&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/header&gt;&lt;div class=&quot;gemboss-editor-body&quot; data-mobile-pane=&quot;chat&quot; style=&quot;--gemboss-chat-w:320px&quot;&gt;&lt;div class=&quot;gemboss-ec&quot;&gt;&lt;div class=&quot;gemboss-ec-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Editor panels&quot;&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;true&quot;&gt;Layers&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;false&quot;&gt;Chat&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ec-dock-body&quot;&gt;Hero · Logos · Benefits · Reviews · FAQ&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-resizer ui-resizer&quot; role=&quot;separator&quot; aria-orientation=&quot;vertical&quot; aria-label=&quot;Resize layers panel&quot; aria-valuenow=&quot;320&quot; aria-valuemin=&quot;300&quot; aria-valuemax=&quot;680&quot; tabindex=&quot;0&quot;&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-preview-pane&quot;&gt;&lt;div class=&quot;gemboss-editor-dock&quot;&gt;&lt;div style=&quot;padding:16px&quot;&gt;&lt;b&gt;Presets&lt;/b&gt;&lt;p style=&quot;color:var(--gemboss-text-muted);margin:8px 0 0&quot;&gt;The right column: docked over the preview, 320px.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-pv-frame gemboss-pv-fit desktop&quot; style=&quot;display:grid;place-items:center;color:var(--gemboss-text-muted)&quot;&gt;Canvas&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-mobile-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Editor panes&quot;&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; aria-selected=&quot;true&quot; class=&quot;gemboss-editor-mobile-tab active&quot;&gt;Layers&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; aria-selected=&quot;false&quot; class=&quot;gemboss-editor-mobile-tab&quot;&gt;Preview&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;script src=&quot;../src/kit-plain.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;../src/editor-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorFrame()&lt;/script&gt;&lt;script&gt;gembossUI.initEditorPanel()&lt;/script&gt;&lt;script src=&quot;../src/editor-layers-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorLayers()&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-editor&quot;&gt;
   &lt;header class=&quot;gemboss-editor-topbar gemboss-editor-topbar--theme&quot;&gt;
     &lt;div class=&quot;gemboss-editor-tb-left&quot;&gt;
       &lt;a href=&quot;#&quot; class=&quot;gemboss-editor-back&quot; aria-label=&quot;Back&quot;&gt;←&lt;/a&gt;
@@ -248,14 +251,14 @@ import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs
 &lt;/div&gt;
 &lt;/div&gt;</code></pre></details></figure>
 <h2>Thanh của page / section editor</h2>
-<figure class="cat-demo"><figcaption>variant=&quot;page&quot;, 1280</figcaption><div class="cat-wide"><iframe title="variant=&quot;page&quot;, 1280" style="width:1280px;height:420px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/editor.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-editor&quot;&gt;&lt;header class=&quot;gemboss-editor-topbar gemboss-pageedit-top&quot;&gt;&lt;div class=&quot;gemboss-editor-tb-left&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;gemboss-editor-back&quot; aria-label=&quot;Back&quot;&gt;←&lt;/a&gt;&lt;span class=&quot;gemboss-editor-tb-name&quot;&gt;Page editor&lt;/span&gt;&lt;span class=&quot;gemboss-pageedit-title&quot;&gt;Spring sale&lt;/span&gt;&lt;span class=&quot;gemboss-pageedit-kind&quot;&gt;Landing page&lt;/span&gt;&lt;span class=&quot;gemboss-pageedit-status&quot;&gt;Draft&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-tb-center&quot;&gt;&lt;div class=&quot;ui-seg gemboss-pv-devices&quot; role=&quot;group&quot; aria-label=&quot;Device&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device&quot; aria-label=&quot;Desktop&quot; title=&quot;Desktop&quot; aria-pressed=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;2.5&quot; y=&quot;4&quot; width=&quot;19&quot; height=&quot;12&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;9&quot; y1=&quot;20.5&quot; x2=&quot;15&quot; y2=&quot;20.5&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;12&quot; y1=&quot;16&quot; x2=&quot;12&quot; y2=&quot;20.5&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device&quot; aria-label=&quot;Tablet&quot; title=&quot;Tablet&quot; aria-pressed=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;4&quot; y=&quot;3&quot; width=&quot;16&quot; height=&quot;18&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;10.5&quot; y1=&quot;18&quot; x2=&quot;13.5&quot; y2=&quot;18&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device active&quot; aria-label=&quot;Mobile&quot; title=&quot;Mobile&quot; aria-pressed=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;6.5&quot; y=&quot;2.5&quot; width=&quot;11&quot; height=&quot;19&quot; rx=&quot;2.5&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;10.5&quot; y1=&quot;18.5&quot; x2=&quot;13.5&quot; y2=&quot;18.5&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-tb-right&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-ghost&quot;&gt;+ Add section&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-publish&quot;&gt;Publish&lt;/button&gt;&lt;/div&gt;&lt;/header&gt;&lt;div class=&quot;gemboss-editor-body&quot; style=&quot;--gemboss-chat-w:384px&quot;&gt;&lt;div class=&quot;gemboss-ec&quot;&gt;&lt;div class=&quot;gemboss-ec-dock-body&quot;&gt;Chat&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-resizer ui-resizer&quot; role=&quot;separator&quot; aria-orientation=&quot;vertical&quot; aria-label=&quot;Resize chat panel&quot; aria-valuenow=&quot;384&quot; aria-valuemin=&quot;300&quot; aria-valuemax=&quot;680&quot; tabindex=&quot;0&quot;&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-preview-pane&quot;&gt;&lt;div class=&quot;gemboss-pv-frame gemboss-pv-fit mobile&quot; style=&quot;display:grid;place-items:center;color:var(--gemboss-text-muted)&quot;&gt;Canvas&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;script src=&quot;../src/kit-plain.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;../src/editor-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorFrame()&lt;/script&gt;&lt;script&gt;gembossUI.initEditorPanel()&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-editor&quot;&gt;
+<figure class="cat-demo"><figcaption>variant=&quot;page&quot;, 1280</figcaption><div class="cat-wide"><iframe title="variant=&quot;page&quot;, 1280" style="width:1280px;height:420px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/editor.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-editor&quot;&gt;&lt;header class=&quot;gemboss-editor-topbar gemboss-pageedit-top&quot;&gt;&lt;div class=&quot;gemboss-editor-tb-left&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;gemboss-editor-back&quot; aria-label=&quot;Back&quot;&gt;←&lt;/a&gt;&lt;span class=&quot;gemboss-editor-tb-name&quot;&gt;Page editor&lt;/span&gt;&lt;span class=&quot;gemboss-pageedit-title&quot;&gt;Spring sale&lt;/span&gt;&lt;span class=&quot;ui-badge&quot;&gt;Landing page&lt;/span&gt;&lt;span class=&quot;ui-badge&quot;&gt;Draft&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-tb-center&quot;&gt;&lt;div class=&quot;ui-seg gemboss-pv-devices&quot; role=&quot;group&quot; aria-label=&quot;Device&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device&quot; aria-label=&quot;Desktop&quot; title=&quot;Desktop&quot; aria-pressed=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;2.5&quot; y=&quot;4&quot; width=&quot;19&quot; height=&quot;12&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;9&quot; y1=&quot;20.5&quot; x2=&quot;15&quot; y2=&quot;20.5&quot;&gt;&lt;/line&gt;&lt;line x1=&quot;12&quot; y1=&quot;16&quot; x2=&quot;12&quot; y2=&quot;20.5&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device&quot; aria-label=&quot;Tablet&quot; title=&quot;Tablet&quot; aria-pressed=&quot;false&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;4&quot; y=&quot;3&quot; width=&quot;16&quot; height=&quot;18&quot; rx=&quot;2&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;10.5&quot; y1=&quot;18&quot; x2=&quot;13.5&quot; y2=&quot;18&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-pv-device active&quot; aria-label=&quot;Mobile&quot; title=&quot;Mobile&quot; aria-pressed=&quot;true&quot;&gt;&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;15&quot; height=&quot;15&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; aria-hidden=&quot;true&quot;&gt;&lt;rect x=&quot;6.5&quot; y=&quot;2.5&quot; width=&quot;11&quot; height=&quot;19&quot; rx=&quot;2.5&quot;&gt;&lt;/rect&gt;&lt;line x1=&quot;10.5&quot; y1=&quot;18.5&quot; x2=&quot;13.5&quot; y2=&quot;18.5&quot;&gt;&lt;/line&gt;&lt;/svg&gt;&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-tb-right&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-ghost&quot;&gt;+ Add section&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-publish&quot;&gt;Publish&lt;/button&gt;&lt;/div&gt;&lt;/header&gt;&lt;div class=&quot;gemboss-editor-body&quot; style=&quot;--gemboss-chat-w:384px&quot;&gt;&lt;div class=&quot;gemboss-ec&quot;&gt;&lt;div class=&quot;gemboss-ec-dock-body&quot;&gt;Chat&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-resizer ui-resizer&quot; role=&quot;separator&quot; aria-orientation=&quot;vertical&quot; aria-label=&quot;Resize chat panel&quot; aria-valuenow=&quot;384&quot; aria-valuemin=&quot;300&quot; aria-valuemax=&quot;680&quot; tabindex=&quot;0&quot;&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-editor-preview-pane&quot;&gt;&lt;div class=&quot;gemboss-pv-frame gemboss-pv-fit mobile&quot; style=&quot;display:grid;place-items:center;color:var(--gemboss-text-muted)&quot;&gt;Canvas&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;script src=&quot;../src/kit-plain.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;../src/editor-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorFrame()&lt;/script&gt;&lt;script&gt;gembossUI.initEditorPanel()&lt;/script&gt;&lt;script src=&quot;../src/editor-layers-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorLayers()&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-editor&quot;&gt;
   &lt;header class=&quot;gemboss-editor-topbar gemboss-pageedit-top&quot;&gt;
     &lt;div class=&quot;gemboss-editor-tb-left&quot;&gt;
       &lt;a href=&quot;#&quot; class=&quot;gemboss-editor-back&quot; aria-label=&quot;Back&quot;&gt;←&lt;/a&gt;
       &lt;span class=&quot;gemboss-editor-tb-name&quot;&gt;Page editor&lt;/span&gt;
       &lt;span class=&quot;gemboss-pageedit-title&quot;&gt;Spring sale&lt;/span&gt;
-      &lt;span class=&quot;gemboss-pageedit-kind&quot;&gt;Landing page&lt;/span&gt;
-      &lt;span class=&quot;gemboss-pageedit-status&quot;&gt;Draft&lt;/span&gt;
+      &lt;span class=&quot;ui-badge&quot;&gt;Landing page&lt;/span&gt;
+      &lt;span class=&quot;ui-badge&quot;&gt;Draft&lt;/span&gt;
     &lt;/div&gt;
     &lt;div class=&quot;gemboss-editor-tb-center&quot;&gt;
       &lt;div class=&quot;ui-seg gemboss-pv-devices&quot; role=&quot;group&quot; aria-label=&quot;Device&quot;&gt;
@@ -316,9 +319,9 @@ import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs
   &lt;Field label=&quot;Padding&quot;&gt;&lt;EdgeBox label=&quot;Padding&quot; values={pad} onChange={(side, raw) =&gt; …} onCommit={save} /&gt;&lt;/Field&gt;
   &lt;Field label=&quot;Image&quot; htmlFor=&quot;img&quot;&gt;&lt;ImageControl id=&quot;img&quot; value={url} onChange={setUrl} /&gt;&lt;/Field&gt;
 &lt;/InspectorGroup&gt;</code></pre>
-<figure class="cat-demo"><figcaption>1280 (chuột): cột Configure 360px, đủ control, nhóm Motion đang gập</figcaption><div class="cat-wide"><iframe title="1280 (chuột): cột Configure 360px, đủ control, nhóm Motion đang gập" style="width:1280px;height:1120px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/editor.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-ec&quot; style=&quot;width:360px;height:1040px&quot;&gt;&lt;div class=&quot;gemboss-ec-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Editor panels&quot;&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;configure&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;true&quot;&gt;Configure&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;chat&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;false&quot;&gt;Chat&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ec-dock-body&quot; style=&quot;padding:0&quot;&gt;&lt;aside class=&quot;gemboss-ei gemboss-ei--docked&quot; role=&quot;region&quot; aria-label=&quot;Settings — Hero&quot;&gt;&lt;header class=&quot;gemboss-ei-head&quot;&gt;&lt;span class=&quot;gemboss-ei-title&quot;&gt;Hero&lt;small&gt;hero-banner.default.v1&lt;/small&gt;&lt;/span&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-act&quot; title=&quot;Duplicate section&quot; aria-label=&quot;Duplicate section&quot;&gt;⧉&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-act&quot; title=&quot;Restore this section to its previous version&quot; aria-label=&quot;Restore this section&quot;&gt;↺&lt;/button&gt;&lt;/header&gt;&lt;div class=&quot;gemboss-ei-tabs&quot; role=&quot;tablist&quot;&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;content&quot; class=&quot;gemboss-ei-tab&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Content&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;design&quot; class=&quot;gemboss-ei-tab on&quot; aria-selected=&quot;true&quot; tabindex=&quot;0&quot;&gt;Design&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;advanced&quot; class=&quot;gemboss-ei-tab&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Advanced&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-body&quot;&gt;&lt;div class=&quot;gemboss-ei-pane&quot;&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Layout&lt;small class=&quot;gemboss-ei-gh-note&quot;&gt;· all screens&lt;/small&gt;&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Content width&lt;/label&gt;&lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Content width&quot;&gt;&lt;button type=&quot;button&quot; data-value=&quot;full&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Full&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;contained&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;Contained&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;narrow&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Narrow&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Columns&lt;/label&gt;&lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Columns&quot;&gt;&lt;button type=&quot;button&quot; data-value=&quot;2&quot; disabled=&quot;&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;2&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;3&quot; disabled=&quot;&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;3&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;4&quot; disabled=&quot;&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;4&lt;/button&gt;&lt;/div&gt;&lt;p class=&quot;gemboss-ei-hint&quot;&gt;Disabled while a change is applied.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Spacing&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Padding&lt;/label&gt;&lt;div class=&quot;gemboss-ei-edgebox&quot;&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding top&quot; value=&quot;24&quot;/&gt;&lt;span&gt;T&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding right&quot; value=&quot;&quot;/&gt;&lt;span&gt;R&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding bottom&quot; value=&quot;24&quot;/&gt;&lt;span&gt;B&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding left&quot; value=&quot;&quot;/&gt;&lt;span&gt;L&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Margin&lt;/label&gt;&lt;div class=&quot;gemboss-ei-edgebox&quot;&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;16&quot; aria-label=&quot;Margin top&quot; value=&quot;&quot;/&gt;&lt;span&gt;T&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Margin right&quot; value=&quot;&quot;/&gt;&lt;span&gt;R&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;16&quot; aria-label=&quot;Margin bottom&quot; value=&quot;&quot;/&gt;&lt;span&gt;B&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Margin left&quot; value=&quot;&quot;/&gt;&lt;span&gt;L&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;p class=&quot;gemboss-ei-hint&quot;&gt;Empty edges follow desktop.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Color&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-bg&quot;&gt;Background&lt;/label&gt;&lt;div class=&quot;gemboss-ei-color&quot;&gt;&lt;input type=&quot;color&quot; class=&quot;gemboss-ei-swatch&quot; aria-label=&quot;Background swatch&quot; value=&quot;#f4efe6&quot;/&gt;&lt;input id=&quot;cat-bg&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;#000000 / var(--…)&quot; value=&quot;#f4efe6&quot;/&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-ov&quot;&gt;Overlay&lt;/label&gt;&lt;div class=&quot;gemboss-ei-color&quot;&gt;&lt;input type=&quot;color&quot; class=&quot;gemboss-ei-swatch&quot; aria-label=&quot;Overlay swatch&quot; disabled=&quot;&quot; title=&quot;linear-gradient(90deg,#000,#0000) — not a plain 6-digit hex; edit it in the box below&quot; value=&quot;#000000&quot;/&gt;&lt;input id=&quot;cat-ov&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;#000000 / var(--…)&quot; value=&quot;linear-gradient(90deg,#000,#0000)&quot;/&gt;&lt;/div&gt;&lt;p class=&quot;gemboss-ei-hint&quot;&gt;A gradient: the swatch cannot show it, so it is off.&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-op&quot;&gt;Opacity&lt;span class=&quot;gemboss-ei-rangeval&quot; data-suffix=&quot;%&quot;&gt;80%&lt;/span&gt;&lt;/label&gt;&lt;input id=&quot;cat-op&quot; type=&quot;range&quot; class=&quot;gemboss-ei-range&quot; min=&quot;0&quot; max=&quot;100&quot; step=&quot;1&quot; value=&quot;80&quot;/&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Media&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-img&quot;&gt;Image&lt;/label&gt;&lt;div class=&quot;gemboss-ei-img&quot;&gt;&lt;div class=&quot;gemboss-ei-img-thumb&quot; aria-hidden=&quot;true&quot;&gt;—&lt;/div&gt;&lt;div class=&quot;gemboss-ei-img-ctl&quot;&gt;&lt;input id=&quot;cat-img&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;Paste image URL…&quot; value=&quot;&quot;/&gt;&lt;div class=&quot;gemboss-ei-img-actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-addchip&quot; aria-expanded=&quot;false&quot;&gt;Library&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-addchip&quot; data-gb-image-clear&gt;Clear&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;closed&quot; aria-expanded=&quot;false&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▸&lt;/span&gt;Motion&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Reveal&lt;/label&gt;&lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Reveal&quot;&gt;&lt;button type=&quot;button&quot; data-value=&quot;none&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;None&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;fade&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Fade&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/aside&gt;&lt;/div&gt;&lt;/div&gt;&lt;script src=&quot;../src/kit-plain.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;../src/editor-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorFrame()&lt;/script&gt;&lt;script&gt;gembossUI.initEditorPanel()&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-ec&quot; style=&quot;width:360px;height:1040px&quot;&gt;
+<figure class="cat-demo"><figcaption>1280 (chuột): cột Configure 360px, đủ control, nhóm Motion đang gập</figcaption><div class="cat-wide"><iframe title="1280 (chuột): cột Configure 360px, đủ control, nhóm Motion đang gập" style="width:1280px;height:1120px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/editor.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-ec&quot; style=&quot;width:360px;height:1040px&quot;&gt;&lt;div class=&quot;gemboss-ec-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Editor panels&quot;&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;configure&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;true&quot;&gt;Settings&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;chat&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;false&quot;&gt;Chat&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ec-dock-body&quot; style=&quot;padding:0&quot;&gt;&lt;aside class=&quot;gemboss-ei gemboss-ei--docked&quot; role=&quot;region&quot; aria-label=&quot;Settings — Hero&quot;&gt;&lt;header class=&quot;gemboss-ei-head&quot;&gt;&lt;span class=&quot;gemboss-ei-title&quot;&gt;Hero&lt;small&gt;hero-banner.default.v1&lt;/small&gt;&lt;/span&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-act&quot; title=&quot;Duplicate section&quot; aria-label=&quot;Duplicate section&quot;&gt;⧉&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-act&quot; title=&quot;Restore this section to its previous version&quot; aria-label=&quot;Restore this section&quot;&gt;↺&lt;/button&gt;&lt;/header&gt;&lt;div class=&quot;gemboss-ei-tabs&quot; role=&quot;tablist&quot;&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;content&quot; class=&quot;gemboss-ei-tab&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Content&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;design&quot; class=&quot;gemboss-ei-tab on&quot; aria-selected=&quot;true&quot; tabindex=&quot;0&quot;&gt;Design&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;advanced&quot; class=&quot;gemboss-ei-tab&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Advanced&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-body&quot;&gt;&lt;div class=&quot;gemboss-ei-pane&quot;&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Layout&lt;small class=&quot;gemboss-ei-gh-note&quot;&gt;· all screens&lt;/small&gt;&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Content width&lt;/label&gt;&lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Content width&quot;&gt;&lt;button type=&quot;button&quot; data-value=&quot;full&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Full&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;contained&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;Contained&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;narrow&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Narrow&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Columns&lt;/label&gt;&lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Columns&quot;&gt;&lt;button type=&quot;button&quot; data-value=&quot;2&quot; disabled=&quot;&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;2&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;3&quot; disabled=&quot;&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;3&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;4&quot; disabled=&quot;&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;4&lt;/button&gt;&lt;/div&gt;&lt;p class=&quot;gemboss-ei-hint&quot;&gt;Disabled while a change is applied.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Spacing&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Padding&lt;/label&gt;&lt;div class=&quot;gemboss-ei-edgebox&quot;&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding top&quot; value=&quot;24&quot;/&gt;&lt;span&gt;T&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding right&quot; value=&quot;&quot;/&gt;&lt;span&gt;R&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding bottom&quot; value=&quot;24&quot;/&gt;&lt;span&gt;B&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding left&quot; value=&quot;&quot;/&gt;&lt;span&gt;L&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Margin&lt;/label&gt;&lt;div class=&quot;gemboss-ei-edgebox&quot;&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;16&quot; aria-label=&quot;Margin top&quot; value=&quot;&quot;/&gt;&lt;span&gt;T&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Margin right&quot; value=&quot;&quot;/&gt;&lt;span&gt;R&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;16&quot; aria-label=&quot;Margin bottom&quot; value=&quot;&quot;/&gt;&lt;span&gt;B&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Margin left&quot; value=&quot;&quot;/&gt;&lt;span&gt;L&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;p class=&quot;gemboss-ei-hint&quot;&gt;Empty edges follow desktop.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Color&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-bg&quot;&gt;Background&lt;/label&gt;&lt;div class=&quot;gemboss-ei-color&quot;&gt;&lt;input type=&quot;color&quot; class=&quot;gemboss-ei-swatch&quot; aria-label=&quot;Background swatch&quot; value=&quot;#f4efe6&quot;/&gt;&lt;input id=&quot;cat-bg&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;#000000 / var(--…)&quot; value=&quot;#f4efe6&quot;/&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-ov&quot;&gt;Overlay&lt;/label&gt;&lt;div class=&quot;gemboss-ei-color&quot;&gt;&lt;input type=&quot;color&quot; class=&quot;gemboss-ei-swatch&quot; aria-label=&quot;Overlay swatch&quot; disabled=&quot;&quot; title=&quot;linear-gradient(90deg,#000,#0000) — not a plain 6-digit hex; edit it in the box below&quot; value=&quot;#000000&quot;/&gt;&lt;input id=&quot;cat-ov&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;#000000 / var(--…)&quot; value=&quot;linear-gradient(90deg,#000,#0000)&quot;/&gt;&lt;/div&gt;&lt;p class=&quot;gemboss-ei-hint&quot;&gt;A gradient: the swatch cannot show it, so it is off.&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-op&quot;&gt;Opacity&lt;span class=&quot;gemboss-ei-rangeval&quot; data-suffix=&quot;%&quot;&gt;80%&lt;/span&gt;&lt;/label&gt;&lt;input id=&quot;cat-op&quot; type=&quot;range&quot; class=&quot;gemboss-ei-range&quot; min=&quot;0&quot; max=&quot;100&quot; step=&quot;1&quot; value=&quot;80&quot;/&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Media&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-img&quot;&gt;Image&lt;/label&gt;&lt;div class=&quot;gemboss-ei-img&quot;&gt;&lt;div class=&quot;gemboss-ei-img-thumb&quot; aria-hidden=&quot;true&quot;&gt;—&lt;/div&gt;&lt;div class=&quot;gemboss-ei-img-ctl&quot;&gt;&lt;input id=&quot;cat-img&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;Paste image URL…&quot; value=&quot;&quot;/&gt;&lt;div class=&quot;gemboss-ei-img-actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-addchip&quot; aria-expanded=&quot;false&quot;&gt;Library&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-addchip&quot; data-gb-image-clear&gt;Clear&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;closed&quot; aria-expanded=&quot;false&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▸&lt;/span&gt;Motion&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Reveal&lt;/label&gt;&lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Reveal&quot;&gt;&lt;button type=&quot;button&quot; data-value=&quot;none&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;None&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;fade&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Fade&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/aside&gt;&lt;/div&gt;&lt;/div&gt;&lt;script src=&quot;../src/kit-plain.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;../src/editor-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorFrame()&lt;/script&gt;&lt;script&gt;gembossUI.initEditorPanel()&lt;/script&gt;&lt;script src=&quot;../src/editor-layers-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorLayers()&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-ec&quot; style=&quot;width:360px;height:1040px&quot;&gt;
   &lt;div class=&quot;gemboss-ec-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Editor panels&quot;&gt;
-    &lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;configure&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;true&quot;&gt;Configure&lt;/button&gt;
+    &lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;configure&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;true&quot;&gt;Settings&lt;/button&gt;
     &lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;chat&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;false&quot;&gt;Chat&lt;/button&gt;
   &lt;/div&gt;
   &lt;div class=&quot;gemboss-ec-dock-body&quot; style=&quot;padding:0&quot;&gt;
@@ -462,9 +465,9 @@ import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs
     &lt;/aside&gt;
   &lt;/div&gt;
 &lt;/div&gt;</code></pre></details></figure>
-<figure class="cat-demo"><figcaption>390 (điện thoại): ô nhập 16px, control 44px</figcaption><div class="cat-wide"><iframe title="390 (điện thoại): ô nhập 16px, control 44px" style="width:390px;height:1240px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/editor.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-ec&quot; style=&quot;width:360px;height:1040px&quot;&gt;&lt;div class=&quot;gemboss-ec-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Editor panels&quot;&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;configure&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;true&quot;&gt;Configure&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;chat&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;false&quot;&gt;Chat&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ec-dock-body&quot; style=&quot;padding:0&quot;&gt;&lt;aside class=&quot;gemboss-ei gemboss-ei--docked&quot; role=&quot;region&quot; aria-label=&quot;Settings — Hero&quot;&gt;&lt;header class=&quot;gemboss-ei-head&quot;&gt;&lt;span class=&quot;gemboss-ei-title&quot;&gt;Hero&lt;small&gt;hero-banner.default.v1&lt;/small&gt;&lt;/span&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-act&quot; title=&quot;Duplicate section&quot; aria-label=&quot;Duplicate section&quot;&gt;⧉&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-act&quot; title=&quot;Restore this section to its previous version&quot; aria-label=&quot;Restore this section&quot;&gt;↺&lt;/button&gt;&lt;/header&gt;&lt;div class=&quot;gemboss-ei-tabs&quot; role=&quot;tablist&quot;&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;content&quot; class=&quot;gemboss-ei-tab&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Content&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;design&quot; class=&quot;gemboss-ei-tab on&quot; aria-selected=&quot;true&quot; tabindex=&quot;0&quot;&gt;Design&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;advanced&quot; class=&quot;gemboss-ei-tab&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Advanced&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-body&quot;&gt;&lt;div class=&quot;gemboss-ei-pane&quot;&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Layout&lt;small class=&quot;gemboss-ei-gh-note&quot;&gt;· all screens&lt;/small&gt;&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Content width&lt;/label&gt;&lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Content width&quot;&gt;&lt;button type=&quot;button&quot; data-value=&quot;full&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Full&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;contained&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;Contained&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;narrow&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Narrow&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Columns&lt;/label&gt;&lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Columns&quot;&gt;&lt;button type=&quot;button&quot; data-value=&quot;2&quot; disabled=&quot;&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;2&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;3&quot; disabled=&quot;&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;3&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;4&quot; disabled=&quot;&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;4&lt;/button&gt;&lt;/div&gt;&lt;p class=&quot;gemboss-ei-hint&quot;&gt;Disabled while a change is applied.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Spacing&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Padding&lt;/label&gt;&lt;div class=&quot;gemboss-ei-edgebox&quot;&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding top&quot; value=&quot;24&quot;/&gt;&lt;span&gt;T&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding right&quot; value=&quot;&quot;/&gt;&lt;span&gt;R&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding bottom&quot; value=&quot;24&quot;/&gt;&lt;span&gt;B&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding left&quot; value=&quot;&quot;/&gt;&lt;span&gt;L&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Margin&lt;/label&gt;&lt;div class=&quot;gemboss-ei-edgebox&quot;&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;16&quot; aria-label=&quot;Margin top&quot; value=&quot;&quot;/&gt;&lt;span&gt;T&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Margin right&quot; value=&quot;&quot;/&gt;&lt;span&gt;R&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;16&quot; aria-label=&quot;Margin bottom&quot; value=&quot;&quot;/&gt;&lt;span&gt;B&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Margin left&quot; value=&quot;&quot;/&gt;&lt;span&gt;L&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;p class=&quot;gemboss-ei-hint&quot;&gt;Empty edges follow desktop.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Color&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-bg&quot;&gt;Background&lt;/label&gt;&lt;div class=&quot;gemboss-ei-color&quot;&gt;&lt;input type=&quot;color&quot; class=&quot;gemboss-ei-swatch&quot; aria-label=&quot;Background swatch&quot; value=&quot;#f4efe6&quot;/&gt;&lt;input id=&quot;cat-bg&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;#000000 / var(--…)&quot; value=&quot;#f4efe6&quot;/&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-ov&quot;&gt;Overlay&lt;/label&gt;&lt;div class=&quot;gemboss-ei-color&quot;&gt;&lt;input type=&quot;color&quot; class=&quot;gemboss-ei-swatch&quot; aria-label=&quot;Overlay swatch&quot; disabled=&quot;&quot; title=&quot;linear-gradient(90deg,#000,#0000) — not a plain 6-digit hex; edit it in the box below&quot; value=&quot;#000000&quot;/&gt;&lt;input id=&quot;cat-ov&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;#000000 / var(--…)&quot; value=&quot;linear-gradient(90deg,#000,#0000)&quot;/&gt;&lt;/div&gt;&lt;p class=&quot;gemboss-ei-hint&quot;&gt;A gradient: the swatch cannot show it, so it is off.&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-op&quot;&gt;Opacity&lt;span class=&quot;gemboss-ei-rangeval&quot; data-suffix=&quot;%&quot;&gt;80%&lt;/span&gt;&lt;/label&gt;&lt;input id=&quot;cat-op&quot; type=&quot;range&quot; class=&quot;gemboss-ei-range&quot; min=&quot;0&quot; max=&quot;100&quot; step=&quot;1&quot; value=&quot;80&quot;/&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Media&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-img&quot;&gt;Image&lt;/label&gt;&lt;div class=&quot;gemboss-ei-img&quot;&gt;&lt;div class=&quot;gemboss-ei-img-thumb&quot; aria-hidden=&quot;true&quot;&gt;—&lt;/div&gt;&lt;div class=&quot;gemboss-ei-img-ctl&quot;&gt;&lt;input id=&quot;cat-img&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;Paste image URL…&quot; value=&quot;&quot;/&gt;&lt;div class=&quot;gemboss-ei-img-actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-addchip&quot; aria-expanded=&quot;false&quot;&gt;Library&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-addchip&quot; data-gb-image-clear&gt;Clear&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;closed&quot; aria-expanded=&quot;false&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▸&lt;/span&gt;Motion&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Reveal&lt;/label&gt;&lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Reveal&quot;&gt;&lt;button type=&quot;button&quot; data-value=&quot;none&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;None&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;fade&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Fade&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/aside&gt;&lt;/div&gt;&lt;/div&gt;&lt;script src=&quot;../src/kit-plain.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;../src/editor-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorFrame()&lt;/script&gt;&lt;script&gt;gembossUI.initEditorPanel()&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-ec&quot; style=&quot;width:360px;height:1040px&quot;&gt;
+<figure class="cat-demo"><figcaption>390 (điện thoại): ô nhập 16px, control 44px</figcaption><div class="cat-wide"><iframe title="390 (điện thoại): ô nhập 16px, control 44px" style="width:390px;height:1240px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/editor.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div class=&quot;gemboss-ec&quot; style=&quot;width:360px;height:1040px&quot;&gt;&lt;div class=&quot;gemboss-ec-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Editor panels&quot;&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;configure&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;true&quot;&gt;Settings&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;chat&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;false&quot;&gt;Chat&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ec-dock-body&quot; style=&quot;padding:0&quot;&gt;&lt;aside class=&quot;gemboss-ei gemboss-ei--docked&quot; role=&quot;region&quot; aria-label=&quot;Settings — Hero&quot;&gt;&lt;header class=&quot;gemboss-ei-head&quot;&gt;&lt;span class=&quot;gemboss-ei-title&quot;&gt;Hero&lt;small&gt;hero-banner.default.v1&lt;/small&gt;&lt;/span&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-act&quot; title=&quot;Duplicate section&quot; aria-label=&quot;Duplicate section&quot;&gt;⧉&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-act&quot; title=&quot;Restore this section to its previous version&quot; aria-label=&quot;Restore this section&quot;&gt;↺&lt;/button&gt;&lt;/header&gt;&lt;div class=&quot;gemboss-ei-tabs&quot; role=&quot;tablist&quot;&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;content&quot; class=&quot;gemboss-ei-tab&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Content&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;design&quot; class=&quot;gemboss-ei-tab on&quot; aria-selected=&quot;true&quot; tabindex=&quot;0&quot;&gt;Design&lt;/button&gt;&lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;advanced&quot; class=&quot;gemboss-ei-tab&quot; aria-selected=&quot;false&quot; tabindex=&quot;-1&quot;&gt;Advanced&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-body&quot;&gt;&lt;div class=&quot;gemboss-ei-pane&quot;&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Layout&lt;small class=&quot;gemboss-ei-gh-note&quot;&gt;· all screens&lt;/small&gt;&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Content width&lt;/label&gt;&lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Content width&quot;&gt;&lt;button type=&quot;button&quot; data-value=&quot;full&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Full&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;contained&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;Contained&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;narrow&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Narrow&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Columns&lt;/label&gt;&lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Columns&quot;&gt;&lt;button type=&quot;button&quot; data-value=&quot;2&quot; disabled=&quot;&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;2&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;3&quot; disabled=&quot;&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;3&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;4&quot; disabled=&quot;&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;4&lt;/button&gt;&lt;/div&gt;&lt;p class=&quot;gemboss-ei-hint&quot;&gt;Disabled while a change is applied.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Spacing&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Padding&lt;/label&gt;&lt;div class=&quot;gemboss-ei-edgebox&quot;&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding top&quot; value=&quot;24&quot;/&gt;&lt;span&gt;T&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding right&quot; value=&quot;&quot;/&gt;&lt;span&gt;R&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding bottom&quot; value=&quot;24&quot;/&gt;&lt;span&gt;B&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Padding left&quot; value=&quot;&quot;/&gt;&lt;span&gt;L&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Margin&lt;/label&gt;&lt;div class=&quot;gemboss-ei-edgebox&quot;&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;16&quot; aria-label=&quot;Margin top&quot; value=&quot;&quot;/&gt;&lt;span&gt;T&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Margin right&quot; value=&quot;&quot;/&gt;&lt;span&gt;R&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;16&quot; aria-label=&quot;Margin bottom&quot; value=&quot;&quot;/&gt;&lt;span&gt;B&lt;/span&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-edge&quot;&gt;&lt;input class=&quot;gemboss-field gemboss-field--narrow gemboss-ei-inp&quot; inputMode=&quot;numeric&quot; placeholder=&quot;0&quot; aria-label=&quot;Margin left&quot; value=&quot;&quot;/&gt;&lt;span&gt;L&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;p class=&quot;gemboss-ei-hint&quot;&gt;Empty edges follow desktop.&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Color&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-bg&quot;&gt;Background&lt;/label&gt;&lt;div class=&quot;gemboss-ei-color&quot;&gt;&lt;input type=&quot;color&quot; class=&quot;gemboss-ei-swatch&quot; aria-label=&quot;Background swatch&quot; value=&quot;#f4efe6&quot;/&gt;&lt;input id=&quot;cat-bg&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;#000000 / var(--…)&quot; value=&quot;#f4efe6&quot;/&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-ov&quot;&gt;Overlay&lt;/label&gt;&lt;div class=&quot;gemboss-ei-color&quot;&gt;&lt;input type=&quot;color&quot; class=&quot;gemboss-ei-swatch&quot; aria-label=&quot;Overlay swatch&quot; disabled=&quot;&quot; title=&quot;linear-gradient(90deg,#000,#0000) — not a plain 6-digit hex; edit it in the box below&quot; value=&quot;#000000&quot;/&gt;&lt;input id=&quot;cat-ov&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;#000000 / var(--…)&quot; value=&quot;linear-gradient(90deg,#000,#0000)&quot;/&gt;&lt;/div&gt;&lt;p class=&quot;gemboss-ei-hint&quot;&gt;A gradient: the swatch cannot show it, so it is off.&lt;/p&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-op&quot;&gt;Opacity&lt;span class=&quot;gemboss-ei-rangeval&quot; data-suffix=&quot;%&quot;&gt;80%&lt;/span&gt;&lt;/label&gt;&lt;input id=&quot;cat-op&quot; type=&quot;range&quot; class=&quot;gemboss-ei-range&quot; min=&quot;0&quot; max=&quot;100&quot; step=&quot;1&quot; value=&quot;80&quot;/&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;open&quot; aria-expanded=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▾&lt;/span&gt;Media&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label for=&quot;cat-img&quot;&gt;Image&lt;/label&gt;&lt;div class=&quot;gemboss-ei-img&quot;&gt;&lt;div class=&quot;gemboss-ei-img-thumb&quot; aria-hidden=&quot;true&quot;&gt;—&lt;/div&gt;&lt;div class=&quot;gemboss-ei-img-ctl&quot;&gt;&lt;input id=&quot;cat-img&quot; class=&quot;gemboss-field gemboss-ei-inp&quot; placeholder=&quot;Paste image URL…&quot; value=&quot;&quot;/&gt;&lt;div class=&quot;gemboss-ei-img-actions&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-addchip&quot; aria-expanded=&quot;false&quot;&gt;Library&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-addchip&quot; data-gb-image-clear&gt;Clear&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-ei-grp&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-gh&quot; data-open=&quot;closed&quot; aria-expanded=&quot;false&quot;&gt;&lt;span class=&quot;gemboss-ei-chev&quot; aria-hidden=&quot;true&quot;&gt;▸&lt;/span&gt;Motion&lt;/button&gt;&lt;div class=&quot;gemboss-ei-fld&quot;&gt;&lt;label&gt;Reveal&lt;/label&gt;&lt;div class=&quot;ui-seg ui-seg--fill gemboss-ei-seg&quot; role=&quot;group&quot; aria-label=&quot;Reveal&quot;&gt;&lt;button type=&quot;button&quot; data-value=&quot;none&quot; aria-pressed=&quot;true&quot; class=&quot;is-text active&quot;&gt;None&lt;/button&gt;&lt;button type=&quot;button&quot; data-value=&quot;fade&quot; aria-pressed=&quot;false&quot; class=&quot;is-text&quot;&gt;Fade&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/aside&gt;&lt;/div&gt;&lt;/div&gt;&lt;script src=&quot;../src/kit-plain.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;../src/editor-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorFrame()&lt;/script&gt;&lt;script&gt;gembossUI.initEditorPanel()&lt;/script&gt;&lt;script src=&quot;../src/editor-layers-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorLayers()&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div class=&quot;gemboss-ec&quot; style=&quot;width:360px;height:1040px&quot;&gt;
   &lt;div class=&quot;gemboss-ec-tabs&quot; role=&quot;tablist&quot; aria-label=&quot;Editor panels&quot;&gt;
-    &lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;configure&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;true&quot;&gt;Configure&lt;/button&gt;
+    &lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;configure&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;true&quot;&gt;Settings&lt;/button&gt;
     &lt;button type=&quot;button&quot; role=&quot;tab&quot; data-value=&quot;chat&quot; class=&quot;gemboss-ec-tab&quot; aria-selected=&quot;false&quot;&gt;Chat&lt;/button&gt;
   &lt;/div&gt;
   &lt;div class=&quot;gemboss-ec-dock-body&quot; style=&quot;padding:0&quot;&gt;
@@ -608,4 +611,417 @@ import { EditorFrame, EditorTopbar, EditorBack, EditorChatToggle, EditorPaneTabs
     &lt;/aside&gt;
   &lt;/div&gt;
 &lt;/div&gt;</code></pre></details></figure>
+<h2>Lớp và ngăn kéo (0.22.0): LayerList, LayerTree, EditorDrawer</h2>
+<p>Đúng Layers, Page settings của page editor và cây Elements của inspector trong admin. Ở đây bật thêm phần admin chưa dùng: kéo hàng để đổi thứ tự (hoặc Alt+↑ / Alt+↓ trên hàng đang focus), con mắt ẩn / hiện, hàng con thụt vào. Bấm "Layers" hoặc "Page settings" để mở ngăn kéo; ✕ hoặc nền mờ để đóng. Mỗi việc bắn một event <code>gemboss:editor-*</code>.</p>
+<h3>React</h3><pre class="cat-api"><code>import { EditorDrawer, LayerList, LayerTree, SortableLayerList } from &quot;@gemboss/ui/editor&quot;;
+{layersOpen ? (
+  &lt;EditorDrawer side=&quot;left&quot; label=&quot;Page layers&quot; title=&quot;Layers&quot; onClose={() =&gt; setLayersOpen(false)}&gt;
+    &lt;SortableLayerList items={sections.map((s) =&gt; ({ id: s.id, title: s.type, subtitle: s.heading, hidden: s.hidden }))}
+      selectedId={picked} onSelect={(it) =&gt; setPicked(it.id)}
+      onMove={(it, to) =&gt; moveSection(it.id, to)}              // drag, or Alt+↑ / Alt+↓; LayerList for a fixed list
+      onToggleHidden={(it, hidden) =&gt; setHidden(it.id, hidden)} // the eye; omit to draw none
+      actions={(it) =&gt; &lt;button aria-label=&quot;Delete&quot; onClick={() =&gt; remove(it.id)}&gt;✕&lt;/button&gt;} empty=&quot;No sections yet&quot; /&gt;
+  &lt;/EditorDrawer&gt;
+) : null}
+&lt;EditorDrawer title=&quot;Page settings&quot; onClose={close} footer={&lt;button className=&quot;gemboss-settings-save&quot;&gt;Save&lt;/button&gt;}&gt;
+  &lt;div className=&quot;gemboss-settings-body&quot;&gt;…&lt;label className=&quot;gemboss-settings-field&quot;&gt;&lt;span&gt;Name&lt;/span&gt;&lt;input className=&quot;gemboss-field&quot; /&gt;&lt;/label&gt;&lt;/div&gt;
+&lt;/EditorDrawer&gt;
+&lt;LayerTree label=&quot;Section elements&quot; rows={flattened} selectedId={node} onSelect={(r) =&gt; setNode(r.id === node ? null : r.id)} actions={(r) =&gt; …} /&gt;</code></pre>
+<figure class="cat-demo"><figcaption>1280: Layers (kéo, ẩn, chọn, thụt cấp), Page settings, cây Elements</figcaption><div class="cat-wide"><iframe title="1280: Layers (kéo, ẩn, chọn, thụt cấp), Page settings, cây Elements" style="width:1280px;height:640px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/editor.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div style=&quot;padding:16px;display:flex;gap:8px&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-ghost&quot; data-gb-drawer=&quot;cat-layers&quot;&gt;☰ Layers&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-ghost&quot; data-gb-drawer=&quot;cat-settings&quot;&gt;Page settings&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-picker-backdrop&quot; hidden&gt;&lt;/div&gt;&lt;aside class=&quot;gemboss-layers&quot; id=&quot;cat-layers&quot; aria-label=&quot;Page layers&quot; hidden&gt;&lt;div class=&quot;gemboss-picker-head&quot;&gt;&lt;span&gt;Layers (6)&lt;/span&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Close&quot;&gt;✕&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-layers-list&quot;&gt;&lt;div class=&quot;gemboss-layer&quot; data-id=&quot;hero&quot; draggable=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-layer-grip&quot; aria-hidden=&quot;true&quot;&gt;⋮⋮&lt;/span&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-main&quot; aria-keyshortcuts=&quot;Alt+ArrowUp Alt+ArrowDown&quot;&gt;&lt;span class=&quot;gemboss-layer-type&quot;&gt;Hero banner&lt;/span&gt;&lt;span class=&quot;gemboss-layer-head&quot;&gt;Spring sale, up to 40% off&lt;/span&gt;&lt;/button&gt;&lt;div class=&quot;gemboss-layer-acts&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-eye&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Hide Hero banner&quot; title=&quot;Hide Hero banner&quot;&gt;&lt;svg width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 16 16&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8s-2.4 4.5-6.5 4.5S1.5 8 1.5 8Z&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;8&quot; cy=&quot;8&quot; r=&quot;2&quot;&gt;&lt;/circle&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Duplicate&quot; title=&quot;Duplicate&quot;&gt;⧉&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-del&quot; aria-label=&quot;Delete&quot; title=&quot;Delete&quot;&gt;✕&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-layer is-sel&quot; data-id=&quot;logos&quot; draggable=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-layer-grip&quot; aria-hidden=&quot;true&quot;&gt;⋮⋮&lt;/span&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-main&quot; aria-current=&quot;true&quot; aria-keyshortcuts=&quot;Alt+ArrowUp Alt+ArrowDown&quot;&gt;&lt;span class=&quot;gemboss-layer-type&quot;&gt;Logo cloud&lt;/span&gt;&lt;span class=&quot;gemboss-layer-head&quot;&gt;Trusted by&lt;/span&gt;&lt;/button&gt;&lt;div class=&quot;gemboss-layer-acts&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-eye&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Hide Logo cloud&quot; title=&quot;Hide Logo cloud&quot;&gt;&lt;svg width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 16 16&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8s-2.4 4.5-6.5 4.5S1.5 8 1.5 8Z&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;8&quot; cy=&quot;8&quot; r=&quot;2&quot;&gt;&lt;/circle&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Duplicate&quot; title=&quot;Duplicate&quot;&gt;⧉&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-del&quot; aria-label=&quot;Delete&quot; title=&quot;Delete&quot;&gt;✕&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-layer&quot; data-id=&quot;benefits&quot; draggable=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-layer-grip&quot; aria-hidden=&quot;true&quot;&gt;⋮⋮&lt;/span&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-main&quot; aria-keyshortcuts=&quot;Alt+ArrowUp Alt+ArrowDown&quot;&gt;&lt;span class=&quot;gemboss-layer-type&quot;&gt;Benefits&lt;/span&gt;&lt;/button&gt;&lt;div class=&quot;gemboss-layer-acts&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-eye&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Hide Benefits&quot; title=&quot;Hide Benefits&quot;&gt;&lt;svg width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 16 16&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8s-2.4 4.5-6.5 4.5S1.5 8 1.5 8Z&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;8&quot; cy=&quot;8&quot; r=&quot;2&quot;&gt;&lt;/circle&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Duplicate&quot; title=&quot;Duplicate&quot;&gt;⧉&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-del&quot; aria-label=&quot;Delete&quot; title=&quot;Delete&quot;&gt;✕&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-layer&quot; data-id=&quot;benefit-card&quot; style=&quot;padding-left:20px&quot; draggable=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-layer-grip&quot; aria-hidden=&quot;true&quot;&gt;⋮⋮&lt;/span&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-main&quot; aria-keyshortcuts=&quot;Alt+ArrowUp Alt+ArrowDown&quot;&gt;&lt;span class=&quot;gemboss-layer-type&quot;&gt;Benefit card&lt;/span&gt;&lt;/button&gt;&lt;div class=&quot;gemboss-layer-acts&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-eye&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Hide Benefit card&quot; title=&quot;Hide Benefit card&quot;&gt;&lt;svg width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 16 16&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8s-2.4 4.5-6.5 4.5S1.5 8 1.5 8Z&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;8&quot; cy=&quot;8&quot; r=&quot;2&quot;&gt;&lt;/circle&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Duplicate&quot; title=&quot;Duplicate&quot;&gt;⧉&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-del&quot; aria-label=&quot;Delete&quot; title=&quot;Delete&quot;&gt;✕&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-layer is-hidden&quot; data-id=&quot;reviews&quot; draggable=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-layer-grip&quot; aria-hidden=&quot;true&quot;&gt;⋮⋮&lt;/span&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-main&quot; aria-keyshortcuts=&quot;Alt+ArrowUp Alt+ArrowDown&quot;&gt;&lt;span class=&quot;gemboss-layer-type&quot;&gt;Reviews&lt;/span&gt;&lt;/button&gt;&lt;div class=&quot;gemboss-layer-acts&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-eye&quot; aria-pressed=&quot;true&quot; aria-label=&quot;Hide Reviews&quot; title=&quot;Hide Reviews&quot;&gt;&lt;svg width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 16 16&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8s-2.4 4.5-6.5 4.5S1.5 8 1.5 8Z&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;8&quot; cy=&quot;8&quot; r=&quot;2&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M2.5 13.5 13.5 2.5&quot; data-gb-slash=&quot;&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Duplicate&quot; title=&quot;Duplicate&quot;&gt;⧉&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-del&quot; aria-label=&quot;Delete&quot; title=&quot;Delete&quot;&gt;✕&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-layer&quot; data-id=&quot;faq&quot; draggable=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-layer-grip&quot; aria-hidden=&quot;true&quot;&gt;⋮⋮&lt;/span&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-main&quot; aria-keyshortcuts=&quot;Alt+ArrowUp Alt+ArrowDown&quot;&gt;&lt;span class=&quot;gemboss-layer-type&quot;&gt;Faq&lt;/span&gt;&lt;span class=&quot;gemboss-layer-head&quot;&gt;Questions shoppers ask&lt;/span&gt;&lt;/button&gt;&lt;div class=&quot;gemboss-layer-acts&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-eye&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Hide Faq&quot; title=&quot;Hide Faq&quot;&gt;&lt;svg width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 16 16&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8s-2.4 4.5-6.5 4.5S1.5 8 1.5 8Z&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;8&quot; cy=&quot;8&quot; r=&quot;2&quot;&gt;&lt;/circle&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Duplicate&quot; title=&quot;Duplicate&quot;&gt;⧉&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-del&quot; aria-label=&quot;Delete&quot; title=&quot;Delete&quot;&gt;✕&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/aside&gt;&lt;div class=&quot;gemboss-picker-backdrop&quot; hidden&gt;&lt;/div&gt;&lt;aside class=&quot;gemboss-settings&quot; id=&quot;cat-settings&quot; aria-label=&quot;Page settings&quot; hidden&gt;&lt;div class=&quot;gemboss-picker-head&quot;&gt;&lt;span&gt;Page settings&lt;/span&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Close&quot;&gt;✕&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-settings-body&quot;&gt;&lt;label class=&quot;gemboss-settings-field&quot;&gt;&lt;span&gt;Page name&lt;/span&gt;&lt;input class=&quot;gemboss-field&quot; value=&quot;Spring sale&quot;/&gt;&lt;small&gt;What this page is called in your Pages list.&lt;/small&gt;&lt;/label&gt;&lt;label class=&quot;gemboss-settings-field&quot;&gt;&lt;span&gt;SEO title&lt;/span&gt;&lt;input class=&quot;gemboss-field&quot; value=&quot;Spring sale · up to 40% off&quot;/&gt;&lt;small&gt;27/70&lt;/small&gt;&lt;/label&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-settings-foot&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-settings-cancel&quot; data-gb-drawer-close=&quot;&quot;&gt;Cancel&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-settings-save&quot;&gt;Save&lt;/button&gt;&lt;/div&gt;&lt;/aside&gt;&lt;div class=&quot;gemboss-ei gemboss-ei--docked&quot; style=&quot;width:320px;padding:12px&quot;&gt;&lt;ul class=&quot;gemboss-ei-tree&quot; role=&quot;tree&quot; aria-label=&quot;Section elements&quot;&gt;&lt;li role=&quot;treeitem&quot; aria-level=&quot;1&quot; aria-selected=&quot;false&quot; aria-posinset=&quot;1&quot; aria-setsize=&quot;1&quot; class=&quot;gemboss-ei-tnode&quot; style=&quot;padding-left:6px&quot; data-id=&quot;root&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-tname&quot;&gt;Section&lt;small&gt;root&lt;/small&gt;&lt;/button&gt;&lt;span class=&quot;gemboss-ei-tacts&quot;&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Add inside&quot; title=&quot;Add inside&quot;&gt;＋&lt;/button&gt;&lt;/span&gt;&lt;/li&gt;&lt;li role=&quot;treeitem&quot; aria-level=&quot;2&quot; aria-selected=&quot;false&quot; aria-posinset=&quot;1&quot; aria-setsize=&quot;2&quot; class=&quot;gemboss-ei-tnode&quot; style=&quot;padding-left:20px&quot; data-id=&quot;product&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-tname&quot;&gt;Product&lt;small&gt;product&lt;/small&gt;&lt;/button&gt;&lt;span class=&quot;gemboss-ei-tacts&quot;&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Move up&quot; title=&quot;Move up&quot;&gt;↑&lt;/button&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Move down&quot; title=&quot;Move down&quot;&gt;↓&lt;/button&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Remove&quot; title=&quot;Remove&quot;&gt;✕&lt;/button&gt;&lt;/span&gt;&lt;/li&gt;&lt;li role=&quot;treeitem&quot; aria-level=&quot;3&quot; aria-selected=&quot;true&quot; aria-posinset=&quot;1&quot; aria-setsize=&quot;2&quot; class=&quot;gemboss-ei-tnode on&quot; style=&quot;padding-left:34px&quot; data-id=&quot;title&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-tname&quot; aria-current=&quot;true&quot;&gt;Product title&lt;small&gt;title&lt;/small&gt;&lt;/button&gt;&lt;span class=&quot;gemboss-ei-tacts&quot;&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Move up&quot; title=&quot;Move up&quot;&gt;↑&lt;/button&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Move down&quot; title=&quot;Move down&quot;&gt;↓&lt;/button&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Remove&quot; title=&quot;Remove&quot;&gt;✕&lt;/button&gt;&lt;/span&gt;&lt;/li&gt;&lt;li role=&quot;treeitem&quot; aria-level=&quot;3&quot; aria-selected=&quot;false&quot; aria-posinset=&quot;2&quot; aria-setsize=&quot;2&quot; class=&quot;gemboss-ei-tnode&quot; style=&quot;padding-left:34px&quot; data-id=&quot;price&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-tname&quot;&gt;Product price&lt;small&gt;price&lt;/small&gt;&lt;/button&gt;&lt;span class=&quot;gemboss-ei-tacts&quot;&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Move up&quot; title=&quot;Move up&quot;&gt;↑&lt;/button&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Move down&quot; title=&quot;Move down&quot;&gt;↓&lt;/button&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Remove&quot; title=&quot;Remove&quot;&gt;✕&lt;/button&gt;&lt;/span&gt;&lt;/li&gt;&lt;li role=&quot;treeitem&quot; aria-level=&quot;2&quot; aria-selected=&quot;false&quot; aria-posinset=&quot;2&quot; aria-setsize=&quot;2&quot; class=&quot;gemboss-ei-tnode&quot; style=&quot;padding-left:20px&quot; data-id=&quot;cta&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-tname&quot;&gt;Button&lt;small&gt;cta&lt;/small&gt;&lt;/button&gt;&lt;span class=&quot;gemboss-ei-tacts&quot;&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Move up&quot; title=&quot;Move up&quot;&gt;↑&lt;/button&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Move down&quot; title=&quot;Move down&quot;&gt;↓&lt;/button&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Remove&quot; title=&quot;Remove&quot;&gt;✕&lt;/button&gt;&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;script src=&quot;../src/kit-plain.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;../src/editor-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorFrame()&lt;/script&gt;&lt;script&gt;gembossUI.initEditorPanel()&lt;/script&gt;&lt;script src=&quot;../src/editor-layers-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorLayers()&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;padding:16px;display:flex;gap:8px&quot;&gt;
+  &lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-ghost&quot; data-gb-drawer=&quot;cat-layers&quot;&gt;☰ Layers&lt;/button&gt;
+  &lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-ghost&quot; data-gb-drawer=&quot;cat-settings&quot;&gt;Page settings&lt;/button&gt;
+&lt;/div&gt;
+&lt;div class=&quot;gemboss-picker-backdrop&quot; hidden&gt;
+&lt;/div&gt;
+&lt;aside class=&quot;gemboss-layers&quot; id=&quot;cat-layers&quot; aria-label=&quot;Page layers&quot; hidden&gt;
+  &lt;div class=&quot;gemboss-picker-head&quot;&gt;
+    &lt;span&gt;Layers (6)&lt;/span&gt;
+    &lt;button type=&quot;button&quot; aria-label=&quot;Close&quot;&gt;✕&lt;/button&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;gemboss-layers-list&quot;&gt;
+    &lt;div class=&quot;gemboss-layer&quot; data-id=&quot;hero&quot; draggable=&quot;true&quot;&gt;
+      &lt;span class=&quot;gemboss-layer-grip&quot; aria-hidden=&quot;true&quot;&gt;⋮⋮&lt;/span&gt;
+      &lt;button type=&quot;button&quot; class=&quot;gemboss-layer-main&quot; aria-keyshortcuts=&quot;Alt+ArrowUp Alt+ArrowDown&quot;&gt;
+        &lt;span class=&quot;gemboss-layer-type&quot;&gt;Hero banner&lt;/span&gt;
+        &lt;span class=&quot;gemboss-layer-head&quot;&gt;Spring sale, up to 40% off&lt;/span&gt;
+      &lt;/button&gt;
+      &lt;div class=&quot;gemboss-layer-acts&quot;&gt;
+        &lt;button type=&quot;button&quot; class=&quot;gemboss-layer-eye&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Hide Hero banner&quot; title=&quot;Hide Hero banner&quot;&gt;
+          &lt;svg width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 16 16&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot; aria-hidden=&quot;true&quot;&gt;
+            &lt;path d=&quot;M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8s-2.4 4.5-6.5 4.5S1.5 8 1.5 8Z&quot;&gt;
+          &lt;/path&gt;
+          &lt;circle cx=&quot;8&quot; cy=&quot;8&quot; r=&quot;2&quot;&gt;
+        &lt;/circle&gt;
+      &lt;/svg&gt;
+    &lt;/button&gt;
+    &lt;button type=&quot;button&quot; aria-label=&quot;Duplicate&quot; title=&quot;Duplicate&quot;&gt;⧉&lt;/button&gt;
+    &lt;button type=&quot;button&quot; class=&quot;gemboss-layer-del&quot; aria-label=&quot;Delete&quot; title=&quot;Delete&quot;&gt;✕&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;gemboss-layer is-sel&quot; data-id=&quot;logos&quot; draggable=&quot;true&quot;&gt;
+  &lt;span class=&quot;gemboss-layer-grip&quot; aria-hidden=&quot;true&quot;&gt;⋮⋮&lt;/span&gt;
+  &lt;button type=&quot;button&quot; class=&quot;gemboss-layer-main&quot; aria-current=&quot;true&quot; aria-keyshortcuts=&quot;Alt+ArrowUp Alt+ArrowDown&quot;&gt;
+    &lt;span class=&quot;gemboss-layer-type&quot;&gt;Logo cloud&lt;/span&gt;
+    &lt;span class=&quot;gemboss-layer-head&quot;&gt;Trusted by&lt;/span&gt;
+  &lt;/button&gt;
+  &lt;div class=&quot;gemboss-layer-acts&quot;&gt;
+    &lt;button type=&quot;button&quot; class=&quot;gemboss-layer-eye&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Hide Logo cloud&quot; title=&quot;Hide Logo cloud&quot;&gt;
+      &lt;svg width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 16 16&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot; aria-hidden=&quot;true&quot;&gt;
+        &lt;path d=&quot;M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8s-2.4 4.5-6.5 4.5S1.5 8 1.5 8Z&quot;&gt;
+      &lt;/path&gt;
+      &lt;circle cx=&quot;8&quot; cy=&quot;8&quot; r=&quot;2&quot;&gt;
+    &lt;/circle&gt;
+  &lt;/svg&gt;
+&lt;/button&gt;
+&lt;button type=&quot;button&quot; aria-label=&quot;Duplicate&quot; title=&quot;Duplicate&quot;&gt;⧉&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-del&quot; aria-label=&quot;Delete&quot; title=&quot;Delete&quot;&gt;✕&lt;/button&gt;
+&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;gemboss-layer&quot; data-id=&quot;benefits&quot; draggable=&quot;true&quot;&gt;
+  &lt;span class=&quot;gemboss-layer-grip&quot; aria-hidden=&quot;true&quot;&gt;⋮⋮&lt;/span&gt;
+  &lt;button type=&quot;button&quot; class=&quot;gemboss-layer-main&quot; aria-keyshortcuts=&quot;Alt+ArrowUp Alt+ArrowDown&quot;&gt;
+    &lt;span class=&quot;gemboss-layer-type&quot;&gt;Benefits&lt;/span&gt;
+  &lt;/button&gt;
+  &lt;div class=&quot;gemboss-layer-acts&quot;&gt;
+    &lt;button type=&quot;button&quot; class=&quot;gemboss-layer-eye&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Hide Benefits&quot; title=&quot;Hide Benefits&quot;&gt;
+      &lt;svg width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 16 16&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot; aria-hidden=&quot;true&quot;&gt;
+        &lt;path d=&quot;M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8s-2.4 4.5-6.5 4.5S1.5 8 1.5 8Z&quot;&gt;
+      &lt;/path&gt;
+      &lt;circle cx=&quot;8&quot; cy=&quot;8&quot; r=&quot;2&quot;&gt;
+    &lt;/circle&gt;
+  &lt;/svg&gt;
+&lt;/button&gt;
+&lt;button type=&quot;button&quot; aria-label=&quot;Duplicate&quot; title=&quot;Duplicate&quot;&gt;⧉&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-del&quot; aria-label=&quot;Delete&quot; title=&quot;Delete&quot;&gt;✕&lt;/button&gt;
+&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;gemboss-layer&quot; data-id=&quot;benefit-card&quot; style=&quot;padding-left:20px&quot; draggable=&quot;true&quot;&gt;
+  &lt;span class=&quot;gemboss-layer-grip&quot; aria-hidden=&quot;true&quot;&gt;⋮⋮&lt;/span&gt;
+  &lt;button type=&quot;button&quot; class=&quot;gemboss-layer-main&quot; aria-keyshortcuts=&quot;Alt+ArrowUp Alt+ArrowDown&quot;&gt;
+    &lt;span class=&quot;gemboss-layer-type&quot;&gt;Benefit card&lt;/span&gt;
+  &lt;/button&gt;
+  &lt;div class=&quot;gemboss-layer-acts&quot;&gt;
+    &lt;button type=&quot;button&quot; class=&quot;gemboss-layer-eye&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Hide Benefit card&quot; title=&quot;Hide Benefit card&quot;&gt;
+      &lt;svg width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 16 16&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot; aria-hidden=&quot;true&quot;&gt;
+        &lt;path d=&quot;M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8s-2.4 4.5-6.5 4.5S1.5 8 1.5 8Z&quot;&gt;
+      &lt;/path&gt;
+      &lt;circle cx=&quot;8&quot; cy=&quot;8&quot; r=&quot;2&quot;&gt;
+    &lt;/circle&gt;
+  &lt;/svg&gt;
+&lt;/button&gt;
+&lt;button type=&quot;button&quot; aria-label=&quot;Duplicate&quot; title=&quot;Duplicate&quot;&gt;⧉&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-del&quot; aria-label=&quot;Delete&quot; title=&quot;Delete&quot;&gt;✕&lt;/button&gt;
+&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;gemboss-layer is-hidden&quot; data-id=&quot;reviews&quot; draggable=&quot;true&quot;&gt;
+  &lt;span class=&quot;gemboss-layer-grip&quot; aria-hidden=&quot;true&quot;&gt;⋮⋮&lt;/span&gt;
+  &lt;button type=&quot;button&quot; class=&quot;gemboss-layer-main&quot; aria-keyshortcuts=&quot;Alt+ArrowUp Alt+ArrowDown&quot;&gt;
+    &lt;span class=&quot;gemboss-layer-type&quot;&gt;Reviews&lt;/span&gt;
+  &lt;/button&gt;
+  &lt;div class=&quot;gemboss-layer-acts&quot;&gt;
+    &lt;button type=&quot;button&quot; class=&quot;gemboss-layer-eye&quot; aria-pressed=&quot;true&quot; aria-label=&quot;Hide Reviews&quot; title=&quot;Hide Reviews&quot;&gt;
+      &lt;svg width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 16 16&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot; aria-hidden=&quot;true&quot;&gt;
+        &lt;path d=&quot;M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8s-2.4 4.5-6.5 4.5S1.5 8 1.5 8Z&quot;&gt;
+      &lt;/path&gt;
+      &lt;circle cx=&quot;8&quot; cy=&quot;8&quot; r=&quot;2&quot;&gt;
+    &lt;/circle&gt;
+    &lt;path d=&quot;M2.5 13.5 13.5 2.5&quot; data-gb-slash=&quot;&quot;&gt;
+  &lt;/path&gt;
+&lt;/svg&gt;
+&lt;/button&gt;
+&lt;button type=&quot;button&quot; aria-label=&quot;Duplicate&quot; title=&quot;Duplicate&quot;&gt;⧉&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-del&quot; aria-label=&quot;Delete&quot; title=&quot;Delete&quot;&gt;✕&lt;/button&gt;
+&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;gemboss-layer&quot; data-id=&quot;faq&quot; draggable=&quot;true&quot;&gt;
+  &lt;span class=&quot;gemboss-layer-grip&quot; aria-hidden=&quot;true&quot;&gt;⋮⋮&lt;/span&gt;
+  &lt;button type=&quot;button&quot; class=&quot;gemboss-layer-main&quot; aria-keyshortcuts=&quot;Alt+ArrowUp Alt+ArrowDown&quot;&gt;
+    &lt;span class=&quot;gemboss-layer-type&quot;&gt;Faq&lt;/span&gt;
+    &lt;span class=&quot;gemboss-layer-head&quot;&gt;Questions shoppers ask&lt;/span&gt;
+  &lt;/button&gt;
+  &lt;div class=&quot;gemboss-layer-acts&quot;&gt;
+    &lt;button type=&quot;button&quot; class=&quot;gemboss-layer-eye&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Hide Faq&quot; title=&quot;Hide Faq&quot;&gt;
+      &lt;svg width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 16 16&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot; aria-hidden=&quot;true&quot;&gt;
+        &lt;path d=&quot;M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8s-2.4 4.5-6.5 4.5S1.5 8 1.5 8Z&quot;&gt;
+      &lt;/path&gt;
+      &lt;circle cx=&quot;8&quot; cy=&quot;8&quot; r=&quot;2&quot;&gt;
+    &lt;/circle&gt;
+  &lt;/svg&gt;
+&lt;/button&gt;
+&lt;button type=&quot;button&quot; aria-label=&quot;Duplicate&quot; title=&quot;Duplicate&quot;&gt;⧉&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-del&quot; aria-label=&quot;Delete&quot; title=&quot;Delete&quot;&gt;✕&lt;/button&gt;
+&lt;/div&gt;
+&lt;/div&gt;
+&lt;/div&gt;
+&lt;/aside&gt;
+&lt;div class=&quot;gemboss-picker-backdrop&quot; hidden&gt;
+&lt;/div&gt;
+&lt;aside class=&quot;gemboss-settings&quot; id=&quot;cat-settings&quot; aria-label=&quot;Page settings&quot; hidden&gt;
+  &lt;div class=&quot;gemboss-picker-head&quot;&gt;
+    &lt;span&gt;Page settings&lt;/span&gt;
+    &lt;button type=&quot;button&quot; aria-label=&quot;Close&quot;&gt;✕&lt;/button&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;gemboss-settings-body&quot;&gt;
+    &lt;label class=&quot;gemboss-settings-field&quot;&gt;
+      &lt;span&gt;Page name&lt;/span&gt;
+      &lt;input class=&quot;gemboss-field&quot; value=&quot;Spring sale&quot;/&gt;
+      &lt;small&gt;What this page is called in your Pages list.&lt;/small&gt;
+    &lt;/label&gt;
+    &lt;label class=&quot;gemboss-settings-field&quot;&gt;
+      &lt;span&gt;SEO title&lt;/span&gt;
+      &lt;input class=&quot;gemboss-field&quot; value=&quot;Spring sale · up to 40% off&quot;/&gt;
+      &lt;small&gt;27/70&lt;/small&gt;
+    &lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;gemboss-settings-foot&quot;&gt;
+    &lt;button type=&quot;button&quot; class=&quot;gemboss-settings-cancel&quot; data-gb-drawer-close=&quot;&quot;&gt;Cancel&lt;/button&gt;
+    &lt;button type=&quot;button&quot; class=&quot;gemboss-settings-save&quot;&gt;Save&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/aside&gt;
+&lt;div class=&quot;gemboss-ei gemboss-ei--docked&quot; style=&quot;width:320px;padding:12px&quot;&gt;
+  &lt;ul class=&quot;gemboss-ei-tree&quot; role=&quot;tree&quot; aria-label=&quot;Section elements&quot;&gt;
+    &lt;li role=&quot;treeitem&quot; aria-level=&quot;1&quot; aria-selected=&quot;false&quot; aria-posinset=&quot;1&quot; aria-setsize=&quot;1&quot; class=&quot;gemboss-ei-tnode&quot; style=&quot;padding-left:6px&quot; data-id=&quot;root&quot;&gt;
+      &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-tname&quot;&gt;Section&lt;small&gt;root&lt;/small&gt;
+      &lt;/button&gt;
+      &lt;span class=&quot;gemboss-ei-tacts&quot;&gt;
+        &lt;button type=&quot;button&quot; aria-label=&quot;Add inside&quot; title=&quot;Add inside&quot;&gt;＋&lt;/button&gt;
+      &lt;/span&gt;
+    &lt;/li&gt;
+    &lt;li role=&quot;treeitem&quot; aria-level=&quot;2&quot; aria-selected=&quot;false&quot; aria-posinset=&quot;1&quot; aria-setsize=&quot;2&quot; class=&quot;gemboss-ei-tnode&quot; style=&quot;padding-left:20px&quot; data-id=&quot;product&quot;&gt;
+      &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-tname&quot;&gt;Product&lt;small&gt;product&lt;/small&gt;
+      &lt;/button&gt;
+      &lt;span class=&quot;gemboss-ei-tacts&quot;&gt;
+        &lt;button type=&quot;button&quot; aria-label=&quot;Move up&quot; title=&quot;Move up&quot;&gt;↑&lt;/button&gt;
+        &lt;button type=&quot;button&quot; aria-label=&quot;Move down&quot; title=&quot;Move down&quot;&gt;↓&lt;/button&gt;
+        &lt;button type=&quot;button&quot; aria-label=&quot;Remove&quot; title=&quot;Remove&quot;&gt;✕&lt;/button&gt;
+      &lt;/span&gt;
+    &lt;/li&gt;
+    &lt;li role=&quot;treeitem&quot; aria-level=&quot;3&quot; aria-selected=&quot;true&quot; aria-posinset=&quot;1&quot; aria-setsize=&quot;2&quot; class=&quot;gemboss-ei-tnode on&quot; style=&quot;padding-left:34px&quot; data-id=&quot;title&quot;&gt;
+      &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-tname&quot; aria-current=&quot;true&quot;&gt;Product title&lt;small&gt;title&lt;/small&gt;
+      &lt;/button&gt;
+      &lt;span class=&quot;gemboss-ei-tacts&quot;&gt;
+        &lt;button type=&quot;button&quot; aria-label=&quot;Move up&quot; title=&quot;Move up&quot;&gt;↑&lt;/button&gt;
+        &lt;button type=&quot;button&quot; aria-label=&quot;Move down&quot; title=&quot;Move down&quot;&gt;↓&lt;/button&gt;
+        &lt;button type=&quot;button&quot; aria-label=&quot;Remove&quot; title=&quot;Remove&quot;&gt;✕&lt;/button&gt;
+      &lt;/span&gt;
+    &lt;/li&gt;
+    &lt;li role=&quot;treeitem&quot; aria-level=&quot;3&quot; aria-selected=&quot;false&quot; aria-posinset=&quot;2&quot; aria-setsize=&quot;2&quot; class=&quot;gemboss-ei-tnode&quot; style=&quot;padding-left:34px&quot; data-id=&quot;price&quot;&gt;
+      &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-tname&quot;&gt;Product price&lt;small&gt;price&lt;/small&gt;
+      &lt;/button&gt;
+      &lt;span class=&quot;gemboss-ei-tacts&quot;&gt;
+        &lt;button type=&quot;button&quot; aria-label=&quot;Move up&quot; title=&quot;Move up&quot;&gt;↑&lt;/button&gt;
+        &lt;button type=&quot;button&quot; aria-label=&quot;Move down&quot; title=&quot;Move down&quot;&gt;↓&lt;/button&gt;
+        &lt;button type=&quot;button&quot; aria-label=&quot;Remove&quot; title=&quot;Remove&quot;&gt;✕&lt;/button&gt;
+      &lt;/span&gt;
+    &lt;/li&gt;
+    &lt;li role=&quot;treeitem&quot; aria-level=&quot;2&quot; aria-selected=&quot;false&quot; aria-posinset=&quot;2&quot; aria-setsize=&quot;2&quot; class=&quot;gemboss-ei-tnode&quot; style=&quot;padding-left:20px&quot; data-id=&quot;cta&quot;&gt;
+      &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-tname&quot;&gt;Button&lt;small&gt;cta&lt;/small&gt;
+      &lt;/button&gt;
+      &lt;span class=&quot;gemboss-ei-tacts&quot;&gt;
+        &lt;button type=&quot;button&quot; aria-label=&quot;Move up&quot; title=&quot;Move up&quot;&gt;↑&lt;/button&gt;
+        &lt;button type=&quot;button&quot; aria-label=&quot;Move down&quot; title=&quot;Move down&quot;&gt;↓&lt;/button&gt;
+        &lt;button type=&quot;button&quot; aria-label=&quot;Remove&quot; title=&quot;Remove&quot;&gt;✕&lt;/button&gt;
+      &lt;/span&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;</code></pre></details></figure>
+<figure class="cat-demo"><figcaption>390 (điện thoại)</figcaption><div class="cat-wide"><iframe title="390 (điện thoại)" style="width:390px;height:900px" srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../gemboss-ui.css&quot;&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;../src/editor.css&quot;&gt;&lt;/head&gt;&lt;body&gt;&lt;div style=&quot;padding:16px;display:flex;gap:8px&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-ghost&quot; data-gb-drawer=&quot;cat-layers&quot;&gt;☰ Layers&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-ghost&quot; data-gb-drawer=&quot;cat-settings&quot;&gt;Page settings&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-picker-backdrop&quot; hidden&gt;&lt;/div&gt;&lt;aside class=&quot;gemboss-layers&quot; id=&quot;cat-layers&quot; aria-label=&quot;Page layers&quot; hidden&gt;&lt;div class=&quot;gemboss-picker-head&quot;&gt;&lt;span&gt;Layers (6)&lt;/span&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Close&quot;&gt;✕&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-layers-list&quot;&gt;&lt;div class=&quot;gemboss-layer&quot; data-id=&quot;hero&quot; draggable=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-layer-grip&quot; aria-hidden=&quot;true&quot;&gt;⋮⋮&lt;/span&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-main&quot; aria-keyshortcuts=&quot;Alt+ArrowUp Alt+ArrowDown&quot;&gt;&lt;span class=&quot;gemboss-layer-type&quot;&gt;Hero banner&lt;/span&gt;&lt;span class=&quot;gemboss-layer-head&quot;&gt;Spring sale, up to 40% off&lt;/span&gt;&lt;/button&gt;&lt;div class=&quot;gemboss-layer-acts&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-eye&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Hide Hero banner&quot; title=&quot;Hide Hero banner&quot;&gt;&lt;svg width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 16 16&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8s-2.4 4.5-6.5 4.5S1.5 8 1.5 8Z&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;8&quot; cy=&quot;8&quot; r=&quot;2&quot;&gt;&lt;/circle&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Duplicate&quot; title=&quot;Duplicate&quot;&gt;⧉&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-del&quot; aria-label=&quot;Delete&quot; title=&quot;Delete&quot;&gt;✕&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-layer is-sel&quot; data-id=&quot;logos&quot; draggable=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-layer-grip&quot; aria-hidden=&quot;true&quot;&gt;⋮⋮&lt;/span&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-main&quot; aria-current=&quot;true&quot; aria-keyshortcuts=&quot;Alt+ArrowUp Alt+ArrowDown&quot;&gt;&lt;span class=&quot;gemboss-layer-type&quot;&gt;Logo cloud&lt;/span&gt;&lt;span class=&quot;gemboss-layer-head&quot;&gt;Trusted by&lt;/span&gt;&lt;/button&gt;&lt;div class=&quot;gemboss-layer-acts&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-eye&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Hide Logo cloud&quot; title=&quot;Hide Logo cloud&quot;&gt;&lt;svg width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 16 16&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8s-2.4 4.5-6.5 4.5S1.5 8 1.5 8Z&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;8&quot; cy=&quot;8&quot; r=&quot;2&quot;&gt;&lt;/circle&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Duplicate&quot; title=&quot;Duplicate&quot;&gt;⧉&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-del&quot; aria-label=&quot;Delete&quot; title=&quot;Delete&quot;&gt;✕&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-layer&quot; data-id=&quot;benefits&quot; draggable=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-layer-grip&quot; aria-hidden=&quot;true&quot;&gt;⋮⋮&lt;/span&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-main&quot; aria-keyshortcuts=&quot;Alt+ArrowUp Alt+ArrowDown&quot;&gt;&lt;span class=&quot;gemboss-layer-type&quot;&gt;Benefits&lt;/span&gt;&lt;/button&gt;&lt;div class=&quot;gemboss-layer-acts&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-eye&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Hide Benefits&quot; title=&quot;Hide Benefits&quot;&gt;&lt;svg width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 16 16&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8s-2.4 4.5-6.5 4.5S1.5 8 1.5 8Z&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;8&quot; cy=&quot;8&quot; r=&quot;2&quot;&gt;&lt;/circle&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Duplicate&quot; title=&quot;Duplicate&quot;&gt;⧉&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-del&quot; aria-label=&quot;Delete&quot; title=&quot;Delete&quot;&gt;✕&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-layer&quot; data-id=&quot;benefit-card&quot; style=&quot;padding-left:20px&quot; draggable=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-layer-grip&quot; aria-hidden=&quot;true&quot;&gt;⋮⋮&lt;/span&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-main&quot; aria-keyshortcuts=&quot;Alt+ArrowUp Alt+ArrowDown&quot;&gt;&lt;span class=&quot;gemboss-layer-type&quot;&gt;Benefit card&lt;/span&gt;&lt;/button&gt;&lt;div class=&quot;gemboss-layer-acts&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-eye&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Hide Benefit card&quot; title=&quot;Hide Benefit card&quot;&gt;&lt;svg width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 16 16&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8s-2.4 4.5-6.5 4.5S1.5 8 1.5 8Z&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;8&quot; cy=&quot;8&quot; r=&quot;2&quot;&gt;&lt;/circle&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Duplicate&quot; title=&quot;Duplicate&quot;&gt;⧉&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-del&quot; aria-label=&quot;Delete&quot; title=&quot;Delete&quot;&gt;✕&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-layer is-hidden&quot; data-id=&quot;reviews&quot; draggable=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-layer-grip&quot; aria-hidden=&quot;true&quot;&gt;⋮⋮&lt;/span&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-main&quot; aria-keyshortcuts=&quot;Alt+ArrowUp Alt+ArrowDown&quot;&gt;&lt;span class=&quot;gemboss-layer-type&quot;&gt;Reviews&lt;/span&gt;&lt;/button&gt;&lt;div class=&quot;gemboss-layer-acts&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-eye&quot; aria-pressed=&quot;true&quot; aria-label=&quot;Hide Reviews&quot; title=&quot;Hide Reviews&quot;&gt;&lt;svg width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 16 16&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8s-2.4 4.5-6.5 4.5S1.5 8 1.5 8Z&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;8&quot; cy=&quot;8&quot; r=&quot;2&quot;&gt;&lt;/circle&gt;&lt;path d=&quot;M2.5 13.5 13.5 2.5&quot; data-gb-slash=&quot;&quot;&gt;&lt;/path&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Duplicate&quot; title=&quot;Duplicate&quot;&gt;⧉&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-del&quot; aria-label=&quot;Delete&quot; title=&quot;Delete&quot;&gt;✕&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-layer&quot; data-id=&quot;faq&quot; draggable=&quot;true&quot;&gt;&lt;span class=&quot;gemboss-layer-grip&quot; aria-hidden=&quot;true&quot;&gt;⋮⋮&lt;/span&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-main&quot; aria-keyshortcuts=&quot;Alt+ArrowUp Alt+ArrowDown&quot;&gt;&lt;span class=&quot;gemboss-layer-type&quot;&gt;Faq&lt;/span&gt;&lt;span class=&quot;gemboss-layer-head&quot;&gt;Questions shoppers ask&lt;/span&gt;&lt;/button&gt;&lt;div class=&quot;gemboss-layer-acts&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-eye&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Hide Faq&quot; title=&quot;Hide Faq&quot;&gt;&lt;svg width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 16 16&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot; aria-hidden=&quot;true&quot;&gt;&lt;path d=&quot;M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8s-2.4 4.5-6.5 4.5S1.5 8 1.5 8Z&quot;&gt;&lt;/path&gt;&lt;circle cx=&quot;8&quot; cy=&quot;8&quot; r=&quot;2&quot;&gt;&lt;/circle&gt;&lt;/svg&gt;&lt;/button&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Duplicate&quot; title=&quot;Duplicate&quot;&gt;⧉&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-del&quot; aria-label=&quot;Delete&quot; title=&quot;Delete&quot;&gt;✕&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/aside&gt;&lt;div class=&quot;gemboss-picker-backdrop&quot; hidden&gt;&lt;/div&gt;&lt;aside class=&quot;gemboss-settings&quot; id=&quot;cat-settings&quot; aria-label=&quot;Page settings&quot; hidden&gt;&lt;div class=&quot;gemboss-picker-head&quot;&gt;&lt;span&gt;Page settings&lt;/span&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Close&quot;&gt;✕&lt;/button&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-settings-body&quot;&gt;&lt;label class=&quot;gemboss-settings-field&quot;&gt;&lt;span&gt;Page name&lt;/span&gt;&lt;input class=&quot;gemboss-field&quot; value=&quot;Spring sale&quot;/&gt;&lt;small&gt;What this page is called in your Pages list.&lt;/small&gt;&lt;/label&gt;&lt;label class=&quot;gemboss-settings-field&quot;&gt;&lt;span&gt;SEO title&lt;/span&gt;&lt;input class=&quot;gemboss-field&quot; value=&quot;Spring sale · up to 40% off&quot;/&gt;&lt;small&gt;27/70&lt;/small&gt;&lt;/label&gt;&lt;/div&gt;&lt;div class=&quot;gemboss-settings-foot&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-settings-cancel&quot; data-gb-drawer-close=&quot;&quot;&gt;Cancel&lt;/button&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-settings-save&quot;&gt;Save&lt;/button&gt;&lt;/div&gt;&lt;/aside&gt;&lt;div class=&quot;gemboss-ei gemboss-ei--docked&quot; style=&quot;width:320px;padding:12px&quot;&gt;&lt;ul class=&quot;gemboss-ei-tree&quot; role=&quot;tree&quot; aria-label=&quot;Section elements&quot;&gt;&lt;li role=&quot;treeitem&quot; aria-level=&quot;1&quot; aria-selected=&quot;false&quot; aria-posinset=&quot;1&quot; aria-setsize=&quot;1&quot; class=&quot;gemboss-ei-tnode&quot; style=&quot;padding-left:6px&quot; data-id=&quot;root&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-tname&quot;&gt;Section&lt;small&gt;root&lt;/small&gt;&lt;/button&gt;&lt;span class=&quot;gemboss-ei-tacts&quot;&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Add inside&quot; title=&quot;Add inside&quot;&gt;＋&lt;/button&gt;&lt;/span&gt;&lt;/li&gt;&lt;li role=&quot;treeitem&quot; aria-level=&quot;2&quot; aria-selected=&quot;false&quot; aria-posinset=&quot;1&quot; aria-setsize=&quot;2&quot; class=&quot;gemboss-ei-tnode&quot; style=&quot;padding-left:20px&quot; data-id=&quot;product&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-tname&quot;&gt;Product&lt;small&gt;product&lt;/small&gt;&lt;/button&gt;&lt;span class=&quot;gemboss-ei-tacts&quot;&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Move up&quot; title=&quot;Move up&quot;&gt;↑&lt;/button&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Move down&quot; title=&quot;Move down&quot;&gt;↓&lt;/button&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Remove&quot; title=&quot;Remove&quot;&gt;✕&lt;/button&gt;&lt;/span&gt;&lt;/li&gt;&lt;li role=&quot;treeitem&quot; aria-level=&quot;3&quot; aria-selected=&quot;true&quot; aria-posinset=&quot;1&quot; aria-setsize=&quot;2&quot; class=&quot;gemboss-ei-tnode on&quot; style=&quot;padding-left:34px&quot; data-id=&quot;title&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-tname&quot; aria-current=&quot;true&quot;&gt;Product title&lt;small&gt;title&lt;/small&gt;&lt;/button&gt;&lt;span class=&quot;gemboss-ei-tacts&quot;&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Move up&quot; title=&quot;Move up&quot;&gt;↑&lt;/button&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Move down&quot; title=&quot;Move down&quot;&gt;↓&lt;/button&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Remove&quot; title=&quot;Remove&quot;&gt;✕&lt;/button&gt;&lt;/span&gt;&lt;/li&gt;&lt;li role=&quot;treeitem&quot; aria-level=&quot;3&quot; aria-selected=&quot;false&quot; aria-posinset=&quot;2&quot; aria-setsize=&quot;2&quot; class=&quot;gemboss-ei-tnode&quot; style=&quot;padding-left:34px&quot; data-id=&quot;price&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-tname&quot;&gt;Product price&lt;small&gt;price&lt;/small&gt;&lt;/button&gt;&lt;span class=&quot;gemboss-ei-tacts&quot;&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Move up&quot; title=&quot;Move up&quot;&gt;↑&lt;/button&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Move down&quot; title=&quot;Move down&quot;&gt;↓&lt;/button&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Remove&quot; title=&quot;Remove&quot;&gt;✕&lt;/button&gt;&lt;/span&gt;&lt;/li&gt;&lt;li role=&quot;treeitem&quot; aria-level=&quot;2&quot; aria-selected=&quot;false&quot; aria-posinset=&quot;2&quot; aria-setsize=&quot;2&quot; class=&quot;gemboss-ei-tnode&quot; style=&quot;padding-left:20px&quot; data-id=&quot;cta&quot;&gt;&lt;button type=&quot;button&quot; class=&quot;gemboss-ei-tname&quot;&gt;Button&lt;small&gt;cta&lt;/small&gt;&lt;/button&gt;&lt;span class=&quot;gemboss-ei-tacts&quot;&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Move up&quot; title=&quot;Move up&quot;&gt;↑&lt;/button&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Move down&quot; title=&quot;Move down&quot;&gt;↓&lt;/button&gt;&lt;button type=&quot;button&quot; aria-label=&quot;Remove&quot; title=&quot;Remove&quot;&gt;✕&lt;/button&gt;&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;script src=&quot;../src/kit-plain.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;../src/editor-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorFrame()&lt;/script&gt;&lt;script&gt;gembossUI.initEditorPanel()&lt;/script&gt;&lt;script src=&quot;../src/editor-layers-plain.js&quot;&gt;&lt;/script&gt;&lt;script&gt;gembossUI.initEditorLayers()&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;"></iframe></div><details class="cat-code"><summary>Markup</summary><pre><code>&lt;div style=&quot;padding:16px;display:flex;gap:8px&quot;&gt;
+  &lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-ghost&quot; data-gb-drawer=&quot;cat-layers&quot;&gt;☰ Layers&lt;/button&gt;
+  &lt;button type=&quot;button&quot; class=&quot;gemboss-editor-tb-ghost&quot; data-gb-drawer=&quot;cat-settings&quot;&gt;Page settings&lt;/button&gt;
+&lt;/div&gt;
+&lt;div class=&quot;gemboss-picker-backdrop&quot; hidden&gt;
+&lt;/div&gt;
+&lt;aside class=&quot;gemboss-layers&quot; id=&quot;cat-layers&quot; aria-label=&quot;Page layers&quot; hidden&gt;
+  &lt;div class=&quot;gemboss-picker-head&quot;&gt;
+    &lt;span&gt;Layers (6)&lt;/span&gt;
+    &lt;button type=&quot;button&quot; aria-label=&quot;Close&quot;&gt;✕&lt;/button&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;gemboss-layers-list&quot;&gt;
+    &lt;div class=&quot;gemboss-layer&quot; data-id=&quot;hero&quot; draggable=&quot;true&quot;&gt;
+      &lt;span class=&quot;gemboss-layer-grip&quot; aria-hidden=&quot;true&quot;&gt;⋮⋮&lt;/span&gt;
+      &lt;button type=&quot;button&quot; class=&quot;gemboss-layer-main&quot; aria-keyshortcuts=&quot;Alt+ArrowUp Alt+ArrowDown&quot;&gt;
+        &lt;span class=&quot;gemboss-layer-type&quot;&gt;Hero banner&lt;/span&gt;
+        &lt;span class=&quot;gemboss-layer-head&quot;&gt;Spring sale, up to 40% off&lt;/span&gt;
+      &lt;/button&gt;
+      &lt;div class=&quot;gemboss-layer-acts&quot;&gt;
+        &lt;button type=&quot;button&quot; class=&quot;gemboss-layer-eye&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Hide Hero banner&quot; title=&quot;Hide Hero banner&quot;&gt;
+          &lt;svg width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 16 16&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot; aria-hidden=&quot;true&quot;&gt;
+            &lt;path d=&quot;M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8s-2.4 4.5-6.5 4.5S1.5 8 1.5 8Z&quot;&gt;
+          &lt;/path&gt;
+          &lt;circle cx=&quot;8&quot; cy=&quot;8&quot; r=&quot;2&quot;&gt;
+        &lt;/circle&gt;
+      &lt;/svg&gt;
+    &lt;/button&gt;
+    &lt;button type=&quot;button&quot; aria-label=&quot;Duplicate&quot; title=&quot;Duplicate&quot;&gt;⧉&lt;/button&gt;
+    &lt;button type=&quot;button&quot; class=&quot;gemboss-layer-del&quot; aria-label=&quot;Delete&quot; title=&quot;Delete&quot;&gt;✕&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;gemboss-layer is-sel&quot; data-id=&quot;logos&quot; draggable=&quot;true&quot;&gt;
+  &lt;span class=&quot;gemboss-layer-grip&quot; aria-hidden=&quot;true&quot;&gt;⋮⋮&lt;/span&gt;
+  &lt;button type=&quot;button&quot; class=&quot;gemboss-layer-main&quot; aria-current=&quot;true&quot; aria-keyshortcuts=&quot;Alt+ArrowUp Alt+ArrowDown&quot;&gt;
+    &lt;span class=&quot;gemboss-layer-type&quot;&gt;Logo cloud&lt;/span&gt;
+    &lt;span class=&quot;gemboss-layer-head&quot;&gt;Trusted by&lt;/span&gt;
+  &lt;/button&gt;
+  &lt;div class=&quot;gemboss-layer-acts&quot;&gt;
+    &lt;button type=&quot;button&quot; class=&quot;gemboss-layer-eye&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Hide Logo cloud&quot; title=&quot;Hide Logo cloud&quot;&gt;
+      &lt;svg width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 16 16&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot; aria-hidden=&quot;true&quot;&gt;
+        &lt;path d=&quot;M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8s-2.4 4.5-6.5 4.5S1.5 8 1.5 8Z&quot;&gt;
+      &lt;/path&gt;
+      &lt;circle cx=&quot;8&quot; cy=&quot;8&quot; r=&quot;2&quot;&gt;
+    &lt;/circle&gt;
+  &lt;/svg&gt;
+&lt;/button&gt;
+&lt;button type=&quot;button&quot; aria-label=&quot;Duplicate&quot; title=&quot;Duplicate&quot;&gt;⧉&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-del&quot; aria-label=&quot;Delete&quot; title=&quot;Delete&quot;&gt;✕&lt;/button&gt;
+&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;gemboss-layer&quot; data-id=&quot;benefits&quot; draggable=&quot;true&quot;&gt;
+  &lt;span class=&quot;gemboss-layer-grip&quot; aria-hidden=&quot;true&quot;&gt;⋮⋮&lt;/span&gt;
+  &lt;button type=&quot;button&quot; class=&quot;gemboss-layer-main&quot; aria-keyshortcuts=&quot;Alt+ArrowUp Alt+ArrowDown&quot;&gt;
+    &lt;span class=&quot;gemboss-layer-type&quot;&gt;Benefits&lt;/span&gt;
+  &lt;/button&gt;
+  &lt;div class=&quot;gemboss-layer-acts&quot;&gt;
+    &lt;button type=&quot;button&quot; class=&quot;gemboss-layer-eye&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Hide Benefits&quot; title=&quot;Hide Benefits&quot;&gt;
+      &lt;svg width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 16 16&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot; aria-hidden=&quot;true&quot;&gt;
+        &lt;path d=&quot;M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8s-2.4 4.5-6.5 4.5S1.5 8 1.5 8Z&quot;&gt;
+      &lt;/path&gt;
+      &lt;circle cx=&quot;8&quot; cy=&quot;8&quot; r=&quot;2&quot;&gt;
+    &lt;/circle&gt;
+  &lt;/svg&gt;
+&lt;/button&gt;
+&lt;button type=&quot;button&quot; aria-label=&quot;Duplicate&quot; title=&quot;Duplicate&quot;&gt;⧉&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-del&quot; aria-label=&quot;Delete&quot; title=&quot;Delete&quot;&gt;✕&lt;/button&gt;
+&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;gemboss-layer&quot; data-id=&quot;benefit-card&quot; style=&quot;padding-left:20px&quot; draggable=&quot;true&quot;&gt;
+  &lt;span class=&quot;gemboss-layer-grip&quot; aria-hidden=&quot;true&quot;&gt;⋮⋮&lt;/span&gt;
+  &lt;button type=&quot;button&quot; class=&quot;gemboss-layer-main&quot; aria-keyshortcuts=&quot;Alt+ArrowUp Alt+ArrowDown&quot;&gt;
+    &lt;span class=&quot;gemboss-layer-type&quot;&gt;Benefit card&lt;/span&gt;
+  &lt;/button&gt;
+  &lt;div class=&quot;gemboss-layer-acts&quot;&gt;
+    &lt;button type=&quot;button&quot; class=&quot;gemboss-layer-eye&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Hide Benefit card&quot; title=&quot;Hide Benefit card&quot;&gt;
+      &lt;svg width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 16 16&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot; aria-hidden=&quot;true&quot;&gt;
+        &lt;path d=&quot;M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8s-2.4 4.5-6.5 4.5S1.5 8 1.5 8Z&quot;&gt;
+      &lt;/path&gt;
+      &lt;circle cx=&quot;8&quot; cy=&quot;8&quot; r=&quot;2&quot;&gt;
+    &lt;/circle&gt;
+  &lt;/svg&gt;
+&lt;/button&gt;
+&lt;button type=&quot;button&quot; aria-label=&quot;Duplicate&quot; title=&quot;Duplicate&quot;&gt;⧉&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-del&quot; aria-label=&quot;Delete&quot; title=&quot;Delete&quot;&gt;✕&lt;/button&gt;
+&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;gemboss-layer is-hidden&quot; data-id=&quot;reviews&quot; draggable=&quot;true&quot;&gt;
+  &lt;span class=&quot;gemboss-layer-grip&quot; aria-hidden=&quot;true&quot;&gt;⋮⋮&lt;/span&gt;
+  &lt;button type=&quot;button&quot; class=&quot;gemboss-layer-main&quot; aria-keyshortcuts=&quot;Alt+ArrowUp Alt+ArrowDown&quot;&gt;
+    &lt;span class=&quot;gemboss-layer-type&quot;&gt;Reviews&lt;/span&gt;
+  &lt;/button&gt;
+  &lt;div class=&quot;gemboss-layer-acts&quot;&gt;
+    &lt;button type=&quot;button&quot; class=&quot;gemboss-layer-eye&quot; aria-pressed=&quot;true&quot; aria-label=&quot;Hide Reviews&quot; title=&quot;Hide Reviews&quot;&gt;
+      &lt;svg width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 16 16&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot; aria-hidden=&quot;true&quot;&gt;
+        &lt;path d=&quot;M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8s-2.4 4.5-6.5 4.5S1.5 8 1.5 8Z&quot;&gt;
+      &lt;/path&gt;
+      &lt;circle cx=&quot;8&quot; cy=&quot;8&quot; r=&quot;2&quot;&gt;
+    &lt;/circle&gt;
+    &lt;path d=&quot;M2.5 13.5 13.5 2.5&quot; data-gb-slash=&quot;&quot;&gt;
+  &lt;/path&gt;
+&lt;/svg&gt;
+&lt;/button&gt;
+&lt;button type=&quot;button&quot; aria-label=&quot;Duplicate&quot; title=&quot;Duplicate&quot;&gt;⧉&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-del&quot; aria-label=&quot;Delete&quot; title=&quot;Delete&quot;&gt;✕&lt;/button&gt;
+&lt;/div&gt;
+&lt;/div&gt;
+&lt;div class=&quot;gemboss-layer&quot; data-id=&quot;faq&quot; draggable=&quot;true&quot;&gt;
+  &lt;span class=&quot;gemboss-layer-grip&quot; aria-hidden=&quot;true&quot;&gt;⋮⋮&lt;/span&gt;
+  &lt;button type=&quot;button&quot; class=&quot;gemboss-layer-main&quot; aria-keyshortcuts=&quot;Alt+ArrowUp Alt+ArrowDown&quot;&gt;
+    &lt;span class=&quot;gemboss-layer-type&quot;&gt;Faq&lt;/span&gt;
+    &lt;span class=&quot;gemboss-layer-head&quot;&gt;Questions shoppers ask&lt;/span&gt;
+  &lt;/button&gt;
+  &lt;div class=&quot;gemboss-layer-acts&quot;&gt;
+    &lt;button type=&quot;button&quot; class=&quot;gemboss-layer-eye&quot; aria-pressed=&quot;false&quot; aria-label=&quot;Hide Faq&quot; title=&quot;Hide Faq&quot;&gt;
+      &lt;svg width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 16 16&quot; fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;1.4&quot; aria-hidden=&quot;true&quot;&gt;
+        &lt;path d=&quot;M1.5 8s2.4-4.5 6.5-4.5S14.5 8 14.5 8s-2.4 4.5-6.5 4.5S1.5 8 1.5 8Z&quot;&gt;
+      &lt;/path&gt;
+      &lt;circle cx=&quot;8&quot; cy=&quot;8&quot; r=&quot;2&quot;&gt;
+    &lt;/circle&gt;
+  &lt;/svg&gt;
+&lt;/button&gt;
+&lt;button type=&quot;button&quot; aria-label=&quot;Duplicate&quot; title=&quot;Duplicate&quot;&gt;⧉&lt;/button&gt;
+&lt;button type=&quot;button&quot; class=&quot;gemboss-layer-del&quot; aria-label=&quot;Delete&quot; title=&quot;Delete&quot;&gt;✕&lt;/button&gt;
+&lt;/div&gt;
+&lt;/div&gt;
+&lt;/div&gt;
+&lt;/aside&gt;
+&lt;div class=&quot;gemboss-picker-backdrop&quot; hidden&gt;
+&lt;/div&gt;
+&lt;aside class=&quot;gemboss-settings&quot; id=&quot;cat-settings&quot; aria-label=&quot;Page settings&quot; hidden&gt;
+  &lt;div class=&quot;gemboss-picker-head&quot;&gt;
+    &lt;span&gt;Page settings&lt;/span&gt;
+    &lt;button type=&quot;button&quot; aria-label=&quot;Close&quot;&gt;✕&lt;/button&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;gemboss-settings-body&quot;&gt;
+    &lt;label class=&quot;gemboss-settings-field&quot;&gt;
+      &lt;span&gt;Page name&lt;/span&gt;
+      &lt;input class=&quot;gemboss-field&quot; value=&quot;Spring sale&quot;/&gt;
+      &lt;small&gt;What this page is called in your Pages list.&lt;/small&gt;
+    &lt;/label&gt;
+    &lt;label class=&quot;gemboss-settings-field&quot;&gt;
+      &lt;span&gt;SEO title&lt;/span&gt;
+      &lt;input class=&quot;gemboss-field&quot; value=&quot;Spring sale · up to 40% off&quot;/&gt;
+      &lt;small&gt;27/70&lt;/small&gt;
+    &lt;/label&gt;
+  &lt;/div&gt;
+  &lt;div class=&quot;gemboss-settings-foot&quot;&gt;
+    &lt;button type=&quot;button&quot; class=&quot;gemboss-settings-cancel&quot; data-gb-drawer-close=&quot;&quot;&gt;Cancel&lt;/button&gt;
+    &lt;button type=&quot;button&quot; class=&quot;gemboss-settings-save&quot;&gt;Save&lt;/button&gt;
+  &lt;/div&gt;
+&lt;/aside&gt;
+&lt;div class=&quot;gemboss-ei gemboss-ei--docked&quot; style=&quot;width:320px;padding:12px&quot;&gt;
+  &lt;ul class=&quot;gemboss-ei-tree&quot; role=&quot;tree&quot; aria-label=&quot;Section elements&quot;&gt;
+    &lt;li role=&quot;treeitem&quot; aria-level=&quot;1&quot; aria-selected=&quot;false&quot; aria-posinset=&quot;1&quot; aria-setsize=&quot;1&quot; class=&quot;gemboss-ei-tnode&quot; style=&quot;padding-left:6px&quot; data-id=&quot;root&quot;&gt;
+      &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-tname&quot;&gt;Section&lt;small&gt;root&lt;/small&gt;
+      &lt;/button&gt;
+      &lt;span class=&quot;gemboss-ei-tacts&quot;&gt;
+        &lt;button type=&quot;button&quot; aria-label=&quot;Add inside&quot; title=&quot;Add inside&quot;&gt;＋&lt;/button&gt;
+      &lt;/span&gt;
+    &lt;/li&gt;
+    &lt;li role=&quot;treeitem&quot; aria-level=&quot;2&quot; aria-selected=&quot;false&quot; aria-posinset=&quot;1&quot; aria-setsize=&quot;2&quot; class=&quot;gemboss-ei-tnode&quot; style=&quot;padding-left:20px&quot; data-id=&quot;product&quot;&gt;
+      &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-tname&quot;&gt;Product&lt;small&gt;product&lt;/small&gt;
+      &lt;/button&gt;
+      &lt;span class=&quot;gemboss-ei-tacts&quot;&gt;
+        &lt;button type=&quot;button&quot; aria-label=&quot;Move up&quot; title=&quot;Move up&quot;&gt;↑&lt;/button&gt;
+        &lt;button type=&quot;button&quot; aria-label=&quot;Move down&quot; title=&quot;Move down&quot;&gt;↓&lt;/button&gt;
+        &lt;button type=&quot;button&quot; aria-label=&quot;Remove&quot; title=&quot;Remove&quot;&gt;✕&lt;/button&gt;
+      &lt;/span&gt;
+    &lt;/li&gt;
+    &lt;li role=&quot;treeitem&quot; aria-level=&quot;3&quot; aria-selected=&quot;true&quot; aria-posinset=&quot;1&quot; aria-setsize=&quot;2&quot; class=&quot;gemboss-ei-tnode on&quot; style=&quot;padding-left:34px&quot; data-id=&quot;title&quot;&gt;
+      &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-tname&quot; aria-current=&quot;true&quot;&gt;Product title&lt;small&gt;title&lt;/small&gt;
+      &lt;/button&gt;
+      &lt;span class=&quot;gemboss-ei-tacts&quot;&gt;
+        &lt;button type=&quot;button&quot; aria-label=&quot;Move up&quot; title=&quot;Move up&quot;&gt;↑&lt;/button&gt;
+        &lt;button type=&quot;button&quot; aria-label=&quot;Move down&quot; title=&quot;Move down&quot;&gt;↓&lt;/button&gt;
+        &lt;button type=&quot;button&quot; aria-label=&quot;Remove&quot; title=&quot;Remove&quot;&gt;✕&lt;/button&gt;
+      &lt;/span&gt;
+    &lt;/li&gt;
+    &lt;li role=&quot;treeitem&quot; aria-level=&quot;3&quot; aria-selected=&quot;false&quot; aria-posinset=&quot;2&quot; aria-setsize=&quot;2&quot; class=&quot;gemboss-ei-tnode&quot; style=&quot;padding-left:34px&quot; data-id=&quot;price&quot;&gt;
+      &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-tname&quot;&gt;Product price&lt;small&gt;price&lt;/small&gt;
+      &lt;/button&gt;
+      &lt;span class=&quot;gemboss-ei-tacts&quot;&gt;
+        &lt;button type=&quot;button&quot; aria-label=&quot;Move up&quot; title=&quot;Move up&quot;&gt;↑&lt;/button&gt;
+        &lt;button type=&quot;button&quot; aria-label=&quot;Move down&quot; title=&quot;Move down&quot;&gt;↓&lt;/button&gt;
+        &lt;button type=&quot;button&quot; aria-label=&quot;Remove&quot; title=&quot;Remove&quot;&gt;✕&lt;/button&gt;
+      &lt;/span&gt;
+    &lt;/li&gt;
+    &lt;li role=&quot;treeitem&quot; aria-level=&quot;2&quot; aria-selected=&quot;false&quot; aria-posinset=&quot;2&quot; aria-setsize=&quot;2&quot; class=&quot;gemboss-ei-tnode&quot; style=&quot;padding-left:20px&quot; data-id=&quot;cta&quot;&gt;
+      &lt;button type=&quot;button&quot; class=&quot;gemboss-ei-tname&quot;&gt;Button&lt;small&gt;cta&lt;/small&gt;
+      &lt;/button&gt;
+      &lt;span class=&quot;gemboss-ei-tacts&quot;&gt;
+        &lt;button type=&quot;button&quot; aria-label=&quot;Move up&quot; title=&quot;Move up&quot;&gt;↑&lt;/button&gt;
+        &lt;button type=&quot;button&quot; aria-label=&quot;Move down&quot; title=&quot;Move down&quot;&gt;↓&lt;/button&gt;
+        &lt;button type=&quot;button&quot; aria-label=&quot;Remove&quot; title=&quot;Remove&quot;&gt;✕&lt;/button&gt;
+      &lt;/span&gt;
+    &lt;/li&gt;
+  &lt;/ul&gt;
+&lt;/div&gt;</code></pre></details></figure>
 </div></body></html>