# Layout

<table data-view="cards"><thead><tr><th align="center"></th><th data-hidden data-card-cover data-type="image">Cover image</th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td align="center"><strong>Accordion</strong></td><td><a href="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FiHan6RkrTHgdQ6JpiRgq%2FFox-BG%20Light%20(100).jpg?alt=media&#x26;token=cc32ead8-2851-4e2a-a32d-a8cd3a779cdf">Fox-BG Light (100).jpg</a></td><td><a href="#accordion">#accordion</a></td></tr><tr><td align="center"><strong>Grid</strong></td><td><a href="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F1BrgugjaQVE3TBJxQNo1%2FFox-BG%20Light%20-%202025-11-17T174256.657.jpg?alt=media&#x26;token=63f23f76-cf6f-4323-bb22-9c3e163eef4c">Fox-BG Light - 2025-11-17T174256.657.jpg</a></td><td><a href="#grid">#grid</a></td></tr><tr><td align="center"><strong>Group</strong></td><td><a href="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2F3GIAPJ9aTGRMgU33foa3%2FFox-BG%20Light%20-%202025-11-17T174406.961.jpg?alt=media&#x26;token=441bd974-c190-4db2-bdbf-e4f44bc19f24">Fox-BG Light - 2025-11-17T174406.961.jpg</a></td><td><a href="#group">#group</a></td></tr></tbody></table>

<details>

<summary>Grid</summary>

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FVkMCym1eR3uYg7jLZdyD%2Fimage.png?alt=media&#x26;token=a573118f-2e3a-449b-9166-3515d23899ba" alt=""><figcaption><p>An example of Grid with Card layered blocks.</p></figcaption></figure>

The **Grid** block helps you arrange your content into clean columns and rows. You can use it to group images, text, buttons, or other nested blocks — creating a structured layout that automatically adjusts across devices.

#### ⚙️ Block settings

<table><thead><tr><th width="275">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Desktop columns</strong></td><td>Choose how many columns to display on desktop (1–12).</td></tr><tr><td><strong>Horizontal gap</strong></td><td>Adjust the space between columns in pixels. Only visible when more than one column is set.</td></tr><tr><td><strong>Vertical gap</strong></td><td>Adjust the space between rows in pixels.</td></tr><tr><td><strong>Width</strong></td><td>Choose how the grid fits its container on desktop and mobile view separately: <code>Fit content</code>, <code>Fill</code>, or <code>Custom width</code>.</td></tr><tr><td><strong>Inherit color scheme</strong></td><td>Toggle to use the same color scheme as the parent section.</td></tr><tr><td><strong>Color scheme</strong></td><td>Select a different color scheme if you disable “Inherit color scheme.”</td></tr><tr><td><strong>Border style</strong></td><td>Add a border around the grid (<code>None</code> or <code>Solid</code>).</td></tr><tr><td><strong>Border width</strong></td><td>Control the thickness of the border (in px). Visible when border is enabled.</td></tr><tr><td><strong>Border opacity</strong></td><td>Adjust the transparency of the border (0–100%).</td></tr><tr><td><strong>Border radius</strong></td><td>Round the corners of the grid container (in px).</td></tr><tr><td><strong>Enable swipe on mobile</strong></td><td>Turn on horizontal swipe for mobile devices (useful for wide grids).</td></tr><tr><td><strong>Mobile columns</strong></td><td>Choose how many columns display on mobile (1–3).</td></tr><tr><td><strong>Horizontal gap (mobile)</strong></td><td>Adjust column spacing on mobile (in px). </td></tr><tr><td><strong>Vertical gap (mobile)</strong></td><td>Adjust row spacing on mobile (in px). Visible if swipe is disabled.</td></tr><tr><td><strong>Padding</strong></td><td>Control the spacing around the grid container (in px).</td></tr><tr><td><strong>Custom columns</strong></td><td>Define custom column rules using CSS grid syntax (advanced).</td></tr></tbody></table>

{% hint style="info" %}

### **Pro tips**

* Use **Enable swipe on mobile** for wide grids to prevent items from shrinking too small.
* Combine with **nested theme blocks** to create more complex grid compositions.
  {% endhint %}

</details>

<details>

<summary>Group</summary>

The **Group** block lets you combine different blocks — such as headings, text, buttons, or badges — into a single structured group. You can arrange them horizontally or vertically and control spacing, alignment, and padding for a polished layout.

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FXfpJA6XWf89w0E3ijK96%2Fimage.png?alt=media&#x26;token=06bfe627-48a6-4212-adb1-87d1a6393248" alt=""><figcaption></figcaption></figure>

***Use case examples:***

* Stack text and buttons together as a cohesive content group.
* Create a horizontal header layout with a title on the left and a button on the right.
* Build multi-line feature cards with icons, text, and links aligned neatly.

#### ⚙️ Block settings

<table><thead><tr><th width="275">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Layout direction</strong></td><td>Choose how blocks are arranged: <code>Vertical</code> (stacked) or <code>Horizontal</code> (side by side).</td></tr><tr><td><strong>Alignment (horizontal layout)</strong></td><td>Adjust horizontal alignment: <code>Left</code>, <code>Center</code>, <code>Right</code>, or <code>Space between</code>.</td></tr><tr><td><strong>Position (horizontal layout)</strong></td><td>Control how content is aligned vertically: <code>Top</code>, <code>Center</code>, or <code>Bottom</code>.</td></tr><tr><td><strong>Alignment (vertical layout)</strong></td><td>Adjust horizontal alignment when using a vertical layout: <code>Left</code>, <code>Center</code>, or <code>Right</code>.</td></tr><tr><td><strong>Horizontal gap</strong></td><td>Space between columns (in px).</td></tr><tr><td><strong>Vertical gap</strong></td><td>Space between rows (in px).</td></tr><tr><td><strong>Width</strong></td><td>Control how wide the group appears: <code>Fit content</code>, <code>Fill</code>, or <code>Custom</code>.</td></tr><tr><td><strong>Custom width</strong></td><td>Define a specific width (%) when “Custom” is selected.</td></tr><tr><td><strong>Mobile width</strong></td><td>Control how wide the group appears on mobile.</td></tr><tr><td><strong>Inherit color scheme</strong></td><td>Use the same color scheme as the parent section.</td></tr><tr><td><strong>Color scheme</strong></td><td>Select a custom color scheme if you disable inheritance.</td></tr><tr><td><strong>Border style</strong></td><td>Add a border around the group (<code>None</code> or <code>Solid</code>).</td></tr><tr><td><strong>Border width</strong></td><td>Control border thickness (px). Visible only when border is enabled.</td></tr><tr><td><strong>Border opacity</strong></td><td>Adjust border transparency (0–100%).</td></tr><tr><td><strong>Border radius</strong></td><td>Round the group’s corners (px).</td></tr><tr><td><strong>Horizontal gap (mobile)</strong></td><td>Adjust column spacing for mobile devices.</td></tr><tr><td><strong>Vertical gap (mobile)</strong></td><td>Adjust row spacing for mobile devices.</td></tr><tr><td><strong>Padding</strong></td><td>Control spacing around the group (top, bottom, left, right).</td></tr><tr><td><strong>Device view</strong></td><td>Toggle between <code>Desktop</code> and <code>Mobile</code> padding controls.</td></tr></tbody></table>

</details>

<details>

<summary>Accordion</summary>

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FvRKJvVgkZ3PTObweyzZK%2Fimage.png?alt=media&#x26;token=9f2f3c3e-95fe-460e-b070-408fe80dfb98" alt=""><figcaption></figcaption></figure>

The **Accordion** block lets you group multiple content rows that expand or collapse when clicked. It’s ideal for FAQs, shipping or return details, product information, and other text-heavy content where you want to save space and keep the page tidy.

***Use case examples:***

* Create an FAQ section with collapsible questions and answers.
* Add product details like **Material**, **Care instructions**, or **Shipping & Returns** under product pages.
* Use in storytelling or info-heavy sections to organize content in a clean, interactive layout.

#### ⚙️ **Block settings**

<table><thead><tr><th width="275">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Open behavior</strong></td><td>Choose how the accordion behaves:<br>• <code>Multiple</code> — allows several rows to stay open.<br>• <code>Single</code> — only one row opens at a time.</td></tr><tr><td><strong>Heading preset</strong></td><td>Select the font style for each accordion title (H1–H6, paragraph, or default).</td></tr><tr><td><strong>Style</strong></td><td>Choose the accordion look:<br>• <code>Standard</code> — simple text layout.<br>• <code>Card</code> — boxed layout with a background color.</td></tr><tr><td><strong>Card color scheme</strong></td><td>Pick a color scheme for card-style accordions (visible only when using “Card” style).</td></tr><tr><td><strong>Arrow icon</strong></td><td>Select the icon that appears beside each heading (<code>Caret</code> or <code>Plus</code>).</td></tr><tr><td><strong>Icon style</strong></td><td>Choose icon weight — <code>Default</code> or <code>Solid</code>.</td></tr><tr><td><strong>Inherit color scheme</strong></td><td>Use the same color scheme as the parent section. Disable to pick a custom color scheme.</td></tr><tr><td><strong>Color scheme</strong></td><td>Choose a custom color palette if not inherited.</td></tr><tr><td><strong>Border style</strong></td><td>Add borders to the accordion container (<code>None</code> or <code>Solid</code>).</td></tr><tr><td><strong>Border radius</strong></td><td>Round the corners of the accordion container (px).</td></tr><tr><td><strong>Padding</strong></td><td>Control the spacing around the accordion block (in px).</td></tr></tbody></table>

<figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Fmx7Oec3wLyIsXOfAkZFY%2Fmediadf.gif?alt=media&#x26;token=e2075f24-3176-42ba-a60e-780d1c0777d1" alt=""><figcaption><p>An example of setting Open behavior </p></figcaption></figure>

<div><figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2Fx77BJaCmY7ZxvI9syldr%2Fimage.png?alt=media&#x26;token=08cc9382-38a3-41a7-8ff0-ed368ac55373" alt=""><figcaption><p>Accordion style as Standard</p></figcaption></figure> <figure><img src="https://1172126658-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgoStNEbk9Q25TX38NhdE%2Fuploads%2FQmSXuwVyUwtLvGZAOz67%2Fimage.png?alt=media&#x26;token=d817b7e1-4256-4362-864a-91bf8109d9a6" alt=""><figcaption><p>Accordion style as Card</p></figcaption></figure></div>

#### 🧩 Accordion row

{% hint style="warning" %}
The **Accordion row** is only available within the **Accordion** block. It can’t be added independently to other sections.
{% endhint %}

Each **Accordion** contains one or more **Accordion row** blocks.

Every row includes:

* A **Heading** (the clickable question or title).
* Nested content blocks (usually **Text**, but can include other blocks).

<table><thead><tr><th width="275">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Open row by default</strong></td><td>Keeps this row expanded by default when the page loads.</td></tr><tr><td><strong>Icon</strong></td><td>Choose an icon to appear beside the row title. You can select from various options (e.g., Caret, Plus, Truck, Heart, etc.).</td></tr><tr><td><strong>Image icon</strong></td><td>Upload a custom image instead of using a preset icon. Useful for brand-specific icons or badges.</td></tr><tr><td><strong>Icon size</strong></td><td>Adjust the icon size.</td></tr><tr><td><strong>Custom width</strong></td><td>Define a custom icon width in pixels (visible only when “Custom size” is selected).</td></tr></tbody></table>

</details>