> 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-sections/banners/grid-banner.md).

# Grid banner

The **Grid banner** section shows up to six image tiles in a grid. Each tile can have an image, a link, and text placed over the image.

Add the section from the section picker. The preset starts with three tiles.

### Section settings <a href="#section-settings" id="section-settings"></a>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Section width</strong></td><td><p>3 options for container</p><ul><li><strong>Fixed width</strong> (default)</li><li><strong>Stretch width</strong></li><li><strong>Full width</strong></li></ul></td></tr><tr><td><strong>Subheading</strong></td><td>Small text above the heading.</td></tr><tr><td><strong>Heading</strong></td><td>Title of the section. To underline words, wrap them in italics in the heading field.</td></tr><tr><td><strong>Drawn underline</strong></td><td><p>Underline under the heading words. On by default. Choose one of these styles:</p><ul><li><strong>Simple underline</strong></li><li><strong>Curve underline</strong></li><li><strong>Squiggle underline</strong> (default)</li></ul><p>The default underline color is #FFB005.</p></td></tr><tr><td><strong>Description</strong></td><td>Text below the heading.</td></tr><tr><td><strong>Heading size</strong></td><td><p>3 options for the heading size</p><ul><li><strong>Large</strong></li><li><strong>Medium</strong> (default)</li><li><strong>Small</strong></li></ul></td></tr><tr><td><strong>Content alignment</strong></td><td><p>3 options for the content alignment</p><ul><li><strong>Left</strong></li><li><strong>Center</strong> (default)</li><li><strong>Right</strong></li></ul></td></tr><tr><td><strong>Column gap</strong></td><td><p>5 options for column gap</p><ul><li><strong>No gap</strong></li><li><strong>Small</strong></li><li><strong>Medium</strong> (default)</li><li><strong>Large</strong></li><li><strong>X-Large</strong></li></ul></td></tr><tr><td><strong>Enable carousel on mobile</strong></td><td>The tiles swipe with pagination on mobile. Default: off.</td></tr><tr><td><strong>Hide item description on mobile</strong></td><td>Hide the description text of each tile on mobile. Default: on.</td></tr><tr><td><strong>Item height</strong></td><td><p>4 options for the tile height</p><ul><li><strong>Adapt to first image</strong> (default)</li><li><strong>Small</strong></li><li><strong>Medium</strong></li><li><strong>Large</strong></li></ul></td></tr><tr><td><strong>Show divider</strong></td><td>Toggles the visibility of a horizontal divider line within the section. Default: off.</td></tr></tbody></table>

#### Section padding <a href="#section-padding" id="section-padding"></a>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Top</strong></td><td>Customize the top margin of the section, from 0 to 100 px. Default: 48 px.</td></tr><tr><td><strong>Bottom</strong></td><td>Customize the bottom margin of the section, from 0 to 100 px. Default: 48 px.</td></tr></tbody></table>

### Tile settings (banner item) <a href="#tile-settings" id="tile-settings"></a>

<table><thead><tr><th width="215">Setting</th><th>Description</th></tr></thead><tbody><tr><td><strong>Color scheme</strong></td><td>Select colors from <strong>Theme settings -> Colors</strong>.</td></tr><tr><td><strong>Image</strong></td><td>Image used on desktop.</td></tr><tr><td><strong>Mobile image</strong></td><td>Image used on mobile. If you leave it empty, the desktop image is used.</td></tr><tr><td><strong>Link</strong></td><td>Makes the whole tile clickable.</td></tr><tr><td><strong>Desktop content position</strong></td><td>Nine positions, from Top left to Bottom right. The preset uses Bottom left.</td></tr><tr><td><strong>Text alignment</strong></td><td><p>3 options for the text alignment</p><ul><li><strong>Left</strong> (default)</li><li><strong>Center</strong></li><li><strong>Right</strong></li></ul></td></tr><tr><td><strong>Show arrow icon</strong></td><td>Show an arrow icon on the tile. Default: on.</td></tr><tr><td><strong>Overlay opacity</strong></td><td>Darkness of the overlay on the image, from 0% to 100%. Default: 20%.</td></tr></tbody></table>

Each tile can hold these content blocks: Heading, Subheading, Highlight text, and Description.

### Layout <a href="#layout" id="layout"></a>

The layout changes with the number of tiles. On desktop:

* One tile fills the full width.
* Two tiles sit side by side.
* Three tiles place one large tile on the left, with two stacked tiles on the right.

Check the preview in the theme editor after you add or remove tiles.

### Mobile <a href="#mobile" id="mobile"></a>

Below 768 px, the tiles stack in one column, or swipe in a carousel when the carousel setting is on.