> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/global-sections/banners/banner-grid.md).

# Banner grid

A grid of banner tiles. Each tile has its own image or video, overlay, content blocks, link, and products.

![Banner Grid section overview](https://3215967854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlyCMfKbEVTf3hu8uxjSZ%2Fuploads%2Fgit-blob-c8f9c68ed424f756abc3bf0cef8e0d6cd4801450%2Fglobal-sections-banner-grid-overview.png?alt=media)

***

## Settings

### Grid

| Setting         | Description                                                                                                                                                                                                                                                                              |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Width           | **Page** — Keeps the content within the page width set in your theme settings. **Full** — Stretches the content across the full browser width, with a small space at the edges. **Full (no padding)** — Stretches the content across the full browser width, with no space at the edges. |
| Desktop columns | Number of tile columns on desktop. Tiles stack to one column on mobile.                                                                                                                                                                                                                  |

### Gap

| Setting | Description                       |
| ------- | --------------------------------- |
| Desktop | Spacing between tiles on desktop. |
| Mobile  | Spacing between tiles on mobile.  |

### Background

An optional background layer behind the whole grid, separate from each tile's own media.

| Setting         | Description                                                                           |
| --------------- | ------------------------------------------------------------------------------------- |
| Media           | Type of section background: none, image, or video.                                    |
| Image           | Section background image.                                                             |
| Image — Mobile  | Separate background image for mobile.                                                 |
| Video           | Shopify-hosted background video.                                                      |
| Show overlay    | Adds a color layer over the background media.                                         |
| Overlay color   | Color and opacity of the overlay.                                                     |
| Parallax effect | Scroll effect for the background media, such as fixed, vertical, horizontal, or zoom. |

### Color

| Setting      | Description                          |
| ------------ | ------------------------------------ |
| Color scheme | Background color behind the section. |

### Padding

| Setting                   | Description                                |
| ------------------------- | ------------------------------------------ |
| Top / Bottom              | Space above and below the section.         |
| Custom padding for mobile | Set independent padding values for mobile. |

***

## Available Blocks

### Banner

#### Banner Settings

| Setting                  | Description                                                                                                   |
| ------------------------ | ------------------------------------------------------------------------------------------------------------- |
| Link                     | Makes the whole tile clickable.                                                                               |
| Open link in new tab     | Opens the tile link in a new browser tab.                                                                     |
| Type                     | Image or video for the tile background.                                                                       |
| Image                    | The tile's background image.                                                                                  |
| Video                    | Shopify-hosted background video for the tile.                                                                 |
| Show overlay             | Adds a color layer over the tile media.                                                                       |
| Overlay color            | Color and opacity of the overlay.                                                                             |
| Desktop height           | Height of the tile on desktop, such as a fixed size or a fixed aspect ratio.                                  |
| Products                 | Products shown on the tile, in the order you pick them.                                                       |
| Alignment                | Horizontal alignment of the content.                                                                          |
| Position                 | Vertical position of the content within the tile.                                                             |
| Separate button          | Pushes the button to the bottom, away from the rest of the content. Available when Position is Top or Center. |
| Desktop gap / Mobile gap | Spacing between the content blocks.                                                                           |
| Corner radius            | Rounding of the tile corners, with a **Custom corner radius** value when set to Custom.                       |
| Color scheme             | Color scheme for the tile's content.                                                                          |
| Padding                  | Inner spacing on all four sides, with independent mobile values via **Custom for mobile**.                    |

{% hint style="info" %}
The parallax effect is a **section-level** setting that applies to the grid's shared background — see [Background](#background) above. Individual Banner tiles do not have their own parallax setting.
{% endhint %}

{% hint style="info" %}
Products are optional. Leave the list empty for image-only tiles, and add products to the tiles where you want shoppers to buy right away.
{% endhint %}

#### Banner Blocks

Blocks you can add inside a Banner tile.

| Block                                                 | Description                                        |
| ----------------------------------------------------- | -------------------------------------------------- |
| [Heading](/helix/theme-blocks/basic/heading.md)       | Main headline.                                     |
| [Subheading](/helix/theme-blocks/basic/subheading.md) | Small label above or below the heading.            |
| [Text](/helix/theme-blocks/basic/text.md)             | Rich-text paragraph for supporting copy.           |
| [Button](/helix/theme-blocks/basic/button.md)         | Single call-to-action with label, link, and style. |
| [Buttons](/helix/theme-blocks/basic/buttons.md)       | Two side-by-side buttons.                          |