> For the complete documentation index, see [llms.txt](https://nextsky.gitbook.io/purity-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextsky.gitbook.io/purity-theme/group-blocks/layout/group.md).

# Group

The **Group** block acts as a flexible container that allows you to nest multiple other blocks inside it. This is essential for applying layout rules (Horizontal/Vertical) and dedicated styling (Color Scheme, Background Image, Padding) to a specific cluster of content.

<figure><img src="https://1059363070-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRcDJSoM26kdEZlVFekVW%2Fuploads%2F0zssMKt9glwJECz1imlj%2Fimage.png?alt=media&amp;token=6f720c46-bca9-4ffb-bed4-81d4c0489dd5" alt=""><figcaption></figcaption></figure>

## General settings

| Setting                  | Description                                                                                                                                          |
| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Link**                 | The URL that the entire Group block container links to when clicked.                                                                                 |
| **Open link in new tab** | A checkbox that, when enabled, ensures the linked URL opens in a new browser tab.                                                                    |
| **Inherit Color Scheme** | A checkbox that, when enabled (Default), uses the color scheme from the parent section.                                                              |
| **Color scheme**         | <p><em>Only visible when Inherit Color Scheme is disabled</em>.</p><p>Allows you to manually select a specific Color Scheme for the group block.</p> |

## Layout

| Settings                | Description                                                                                                                                                                                                                 |
| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Direction**           | Controls how the nested blocks are arranged: Vertical (Staked, default) or Horizontal (Side-by-side).                                                                                                                       |
| **Vertical on Mobile**  | <p><em>Only visible when Direction is Horizontal</em>.</p><p>Check this box to force nested blocks to stack vertically on mobile devices.</p>                                                                               |
| **Content Wrap**        | <p><em>Only visible when Direction is Horizontal</em>.</p><p>Check this box to allow nested blocks to wrap to the next line if they exceed the group's width.</p>                                                           |
| **Horizontal Position** | <p><em>Only visible when Direction is Horizontal</em>.</p><p>Controls the vertical alignment (cross-axis):</p><ul><li>Top</li><li>Center (Default)</li><li>Bottom.</li></ul>                                                |
| **Vertical Position**   | <p><em>Only visible when Direction is Vertical</em>.</p><p>Controls the vertical alignment (main axis):</p><ul><li>Top,</li><li>Center (Default)</li><li>Bottom</li><li>Space Between (Distributes space evenly).</li></ul> |
| **Alignment**           | <p>Controls the horizontal arrangement (main axis):</p><ul><li>Start (Left)</li><li>Center (Default)</li><li>End (Right)</li><li>Space Between (Distributes space evenly)</li></ul>                                         |
| **Gap**                 | Sets the spacing (gutter) between the nested blocks, measured in pixels (px) (Range: 0px to 100px).                                                                                                                         |
| **Hidden on mobile**    | Hiding the section on mobile                                                                                                                                                                                                |

## Size

<table><thead><tr><th width="193.79998779296875">Setting</th><th width="133.00006103515625">Applies To</th><th>Description</th></tr></thead><tbody><tr><td><strong>Width</strong></td><td>Desktop</td><td><p>Defines the block's width:</p><ul><li>Fit (Default — size determined by content)</li><li>Fill (Expands to fill available space)</li><li>Custom (Allows setting a specific percentage width).</li></ul></td></tr><tr><td><strong>Custom Width</strong></td><td>Desktop</td><td><p><em>Only visible when Width is Custom</em>.</p><p>Sets the specific block width in percentage (%) (Range: 0% to 100%).</p></td></tr><tr><td><strong>Mobile Width</strong></td><td>Mobile</td><td>Defines the block's width on mobile: Fit, Fill (Default), or Custom.</td></tr><tr><td><strong>Custom Mobile Width</strong></td><td>Mobile</td><td><p><em>Only visible when Mobile Width is Custom</em>.</p><p>Sets the specific block width on mobile in percentage (%) (Range: 0% to 100%).</p></td></tr><tr><td><strong>Height</strong></td><td>Both</td><td><p>Defines the height:</p><ul><li>Fit (Default — size determined by content)</li><li>Fill (Expands to fill available space)</li><li>Custom (Allows setting a specific percentage width).</li><li>Adapt to media background</li></ul></td></tr><tr><td><strong>Custom Height</strong></td><td>Both</td><td><em>Only visible when Height is Custom</em>. Sets the specific block height in percentage (%) (Range: 0% to 100%).</td></tr></tbody></table>

## Appearance

| Setting                       | Description                                                                                                                                 |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| **Background Media**          | <p>Selects the background media:</p><ul><li>None (Default)</li><li>Image</li><li>Video.</li></ul>                                           |
| **Image**                     | <p><em>Only visible when Background Media is Image</em>.</p><p>Allows image upload for the background.</p>                                  |
| **Local Video**               | <p><em>Only visible when Background Media is Video</em>.</p><p>Allows video upload for the background.</p>                                  |
| **Corner Radius**             | <p>Controls rounding:</p><ul><li>None</li><li>Custom.</li></ul>                                                                             |
| **Custom Radius**             | <p><em>Only visible when Corner Radius is Custom</em>.</p><p>Sets the custom radius in pixels (px) (Range: 0px to 100px).</p>               |
| **Enable Background Overlay** | <p><em>Only visible when Background Media is not None</em>.</p><p>Check to add a colored layer over the background media for contrast.</p>  |
| **Overlay Color**             | <p><em>Only visible when Overlay is enabled</em>.</p><p>Sets the color and transparency (alpha) of the overlay.</p>                         |
| **Overlay Style**             | <p><em>Only visible when Overlay is enabled</em>.</p><p>Defines the style:</p><ul><li>Solid (Default)</li><li>Gradient.</li></ul>           |
| **Gradient Direction**        | <p><em>Only visible when Overlay Style is Gradient</em>.</p><p>Sets the direction:</p><ul><li>To Top (Default)</li><li>To Bottom.</li></ul> |
| **Border Style**              | <p>Adds a border:</p><ul><li>None (Default)</li><li>Solid.</li></ul>                                                                        |

### Spacing

These settings control the external spacing (padding) applied directly above and below this specific block.

| Setting    | Description                                                                                                      |
| ---------- | ---------------------------------------------------------------------------------------------------------------- |
| **Top**    | Sets the amount of empty space (padding) above this button block. Measured in pixels (px) (Range: 0px to 100px). |
| **Bottom** | Sets the amount of empty space (padding) below this button block. Measured in pixels (px) (Range: 0px to 100px). |