# Group block

Source: https://themes.spicydesign.ca/help/reference/blocks/group/
Updated: 2026-11-12

A container that arranges other blocks in a row or column, with its own background, spacing and optional background video.


A container that arranges other blocks in a row or column, with its own background, spacing and optional background video.

**Where to find it:** open any section sidebar that accepts theme blocks, choose **Add block**, then pick **Group**.

The same block in the three themes:

![The Group block in the Picante style.](https://themes.spicydesign.ca/help/shots/block-group--picante.webp)

![The Group block in the Overdrive style.](https://themes.spicydesign.ca/help/shots/block-group--overdrive.webp)

![The Group block in the Pastille style.](https://themes.spicydesign.ca/help/shots/block-group--pastille.webp)

When you add this section, you can start from these presets: **Group**, **Row group**, **Card group**.

## Settings

### Layout

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Layout mode | Select | Stack or row | Stack or row, Grid |  |
| Direction | Select | Vertical | Vertical, Horizontal | Shown when **Layout mode** is Stack or row. |
| Columns on desktop | Slider | 2 | 1 to 6, step 1 | Shown when **Layout mode** is Grid. |
| Columns on mobile | Slider | 1 | 1 to 4, step 1 | Shown when **Layout mode** is Grid. |
| Horizontal alignment | Select | Left | Left, Center, Right, Space between |  |
| Vertical alignment | Select | Top | Top, Middle, Bottom, Stretch to equal height |  |
| Gap | Slider | 16 px | 0 to 100 px, step 4 |  |
| Wrap onto new lines | Checkbox | On |  | When off, blocks stay on one line and shrink to fit. Shown when **Layout mode** is Stack or row and **Direction** is Horizontal. |
| Stack on mobile | Checkbox | On |  | Shown when **Layout mode** is Stack or row and **Direction** is Horizontal. |

### Size

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Width | Select | Fill | Fit content, Fill, Custom |  |
| Custom width | Slider | 50 % | 10 to 100 %, step 5 | Shown when **Width** is Custom. |
| Height | Select | Custom | Auto, Fill available space, Custom |  |
| Minimum height | Slider | 0 svh | 0 to 100 svh, step 5 | Shown when **Height** is Custom. |

### Colors and border

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Inherit color scheme | Checkbox | On |  |  |
| Color scheme | Color scheme | Scheme 1 |  | Shown when **Inherit color scheme** is off. |

### Background

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Background image | Image |  |  |  |
| Background video | Video |  |  | Plays muted on a loop with a pause button. The image shows first, and stays for customers who prefer reduced motion. |
| Show placeholder image | Checkbox | Off |  | Previews the layout with a sample image until you select an image or video. Customers see the sample image too, so add your own before you publish. Shown when **Background image** is on and **Background video** is on. |
| Overlay opacity | Slider | 30 % | 0 to 90 %, step 5 | Shown when **Background image** is on or **Background video** is on or **Show placeholder image** is on. |
| Overlay color | Color |  |  | Leave empty to use the color scheme background. Shown when **Background image** is on or **Background video** is on or **Show placeholder image** is on. |
| Overlay text color | Color |  |  | Text color on top of the background image or video. Leave empty to use the color scheme text. Shown when **Background image** is on or **Background video** is on or **Show placeholder image** is on. |
| Overlay style | Select | Solid | Solid, Gradient | Shown when **Background image** is on or **Background video** is on or **Show placeholder image** is on. |
| Gradient strongest at | Select | Bottom | Bottom, Top, Left, Right | Shown when **Overlay style** is Gradient and **Background image** is on and **Background video** is on and **Show placeholder image** is on. |

### Link

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Link | Link |  |  | Makes the whole group clickable. Links and buttons inside it keep working. |
| Link label | Text |  |  | Screen readers read this label. Leave empty to use the text inside the group. Shown when **Link** is on. |
| Hover effect | Select | None | None, Lift, Zoom media | Shown when **Link** is on. |

### More options

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Show more options | Checkbox | Off |  | Shows spacing, maximum width, border, corners, sticky, animation and grid span. Settings you have changed stay visible. |
| Top padding | Slider | 0 px | 0 to 100 px, step 2 | Shown when **Show more options** is on or **Top padding** is on or **Bottom padding** is on or **Left padding** is on or **Right padding** is on. |
| Bottom padding | Slider | 0 px | 0 to 100 px, step 2 | Shown when **Show more options** is on or **Top padding** is on or **Bottom padding** is on or **Left padding** is on or **Right padding** is on. |
| Left padding | Slider | 0 px | 0 to 100 px, step 2 | Shown when **Show more options** is on or **Top padding** is on or **Bottom padding** is on or **Left padding** is on or **Right padding** is on. |
| Right padding | Slider | 0 px | 0 to 100 px, step 2 | Shown when **Show more options** is on or **Top padding** is on or **Bottom padding** is on or **Left padding** is on or **Right padding** is on. |
| Max width | Select | None | None, Narrow, Normal, Wide | Shown when **Show more options** is on or **Max width** is not None. |
| Border | Select | None | None, Solid, Dashed | Shown when **Show more options** is on or **Border** is not None. |
| Border thickness | Slider | 2 px | 1 to 8 px, step 1 | Shown when **Border** is not None. |
| Corner radius | Slider | 0 px | 0 to 80 px, step 2 | Shown when **Show more options** is on or **Corner radius** is on. |
| Stick while scrolling on desktop | Checkbox | Off |  | For split layouts: this group stays in view while a taller neighbor scrolls past. Shown when **Stick while scrolling on desktop** is on and **Show more options** is on and **Height** is not Fill available space. |
| Reverse order on mobile | Checkbox | Off |  | Changes the visual order only. Keyboard and screen reader order stays the same. Shown when **Reverse order on mobile** is on and **Show more options** is on and **Layout mode** is Stack or row and **Columns on mobile** is on. |
| Animation on scroll | Select | Theme default | Theme default, None, Fade, Slide up, Scale in, Wipe, Blur in | Shown when **Show more options** is on or **Animation on scroll** is not Theme default. |

These apply when the section or group around this one uses the Grid layout.

### More options

| Setting | Type | Default | Options | Notes |
| --- | --- | --- | --- | --- |
| Columns to span | Slider | 1 | 1 to 6, step 1 | Shown when **Show more options** is on or **Columns to span** is on or **Rows to span** is on. |
| Rows to span | Slider | 1 | 1 to 4, step 1 | Shown when **Show more options** is on or **Columns to span** is on or **Rows to span** is on. |

## Nested blocks

This block can hold other theme blocks. Add them from the block's own sidebar entry.