# 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="/files/8nRZyqlXnCfS2V7voU6s">/files/8nRZyqlXnCfS2V7voU6s</a></td><td><a href="/pages/yUngW5lCQUn2Igc1Ym1P#accordion">/pages/yUngW5lCQUn2Igc1Ym1P#accordion</a></td></tr><tr><td align="center"><strong>Grid</strong></td><td><a href="/files/1nvRR70cyOAitgwcpyEo">/files/1nvRR70cyOAitgwcpyEo</a></td><td><a href="/pages/yUngW5lCQUn2Igc1Ym1P#grid">/pages/yUngW5lCQUn2Igc1Ym1P#grid</a></td></tr><tr><td align="center"><strong>Group</strong></td><td><a href="/files/pgeoR7mFXOMB19ZFY6fj">/files/pgeoR7mFXOMB19ZFY6fj</a></td><td><a href="/pages/yUngW5lCQUn2Igc1Ym1P#group">/pages/yUngW5lCQUn2Igc1Ym1P#group</a></td></tr></tbody></table>

<details>

<summary>Grid</summary>

<figure><img src="/files/DmKCX9yo3tofYmsZGW43" 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="/files/AfBViWDpsoFCYq9VThdF" 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="/files/G8oov7uS0HwZAG6OQ22D" 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="/files/9Q7FFNvFXll1V3NBe1aj" alt=""><figcaption><p>An example of setting Open behavior </p></figcaption></figure>

<div><figure><img src="/files/tgzmV86qYRLWEMMcwSP6" alt=""><figcaption><p>Accordion style as Standard</p></figcaption></figure> <figure><img src="/files/29NGDPOCv3UvO9Ymf3IC" 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>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/pebble-theme/theme-blocks/layout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.