# Banner grid

![image](https://docs-assets.foxecom.app/megamog-theme/image_3hDztxcp.png)

The Banner grids section offers unique ways to showcase your image cards. 

<Hint type="success">

**Steps:**

1. In the theme editor **(Customize)**, click **Add section**
2. Select **Banner grid 1/2/3** that has the layout your prefer
3. Make necessary changes
4. **Save** the settings.

</Hint>

## Section settings

### Grid settings

Change the section's layout on Desktop. The layout is automatically optimized for mobile view.

![image](https://docs-assets.foxecom.app/megamog-theme/image_SxLeoCMR.png)

<Tabs>
<Tab title="Layout 1">

![image](https://docs-assets.foxecom.app/megamog-theme/image_u2GgmYHW.png)

</Tab>

<Tab title="Layout 2">

![image](https://docs-assets.foxecom.app/megamog-theme/image_qgnFmQFg.png)

</Tab>

<Tab title="Layout 3">

![image](https://docs-assets.foxecom.app/megamog-theme/image_hqculVhs.png)

</Tab>
</Tabs>

Adjust the gap between columns and rows on desktop and mobile.

![image](https://docs-assets.foxecom.app/megamog-theme/image_0Isp3uTJ.png)

## Block settings

A maximum of 4 image cards can be added to the section.

Each block comes with the following settings:

### Image settings

Select an image for your desktop view and mobile view.

![image](https://docs-assets.foxecom.app/megamog-theme/image_INHAqeRA.png)

### Link settings

Link your image card with a desired page by selecting from your Shopify pages or pasting the URL.

Determine how the link is applied (on the whole card or the button only).

![image](https://docs-assets.foxecom.app/megamog-theme/image_t0UoePX5.png)

### Content settings

Insert your card's heading, subheading and description. Select the heading size and description style you prefer.

![image](https://docs-assets.foxecom.app/megamog-theme/image_dqWlBado.png)

Adjust the content position and content alignment.

![image](https://docs-assets.foxecom.app/megamog-theme/image_4N4SZeJS.png)

Select 'Push last block to bottom' option if you want to separate your card's content and the button.

![image](https://docs-assets.foxecom.app/megamog-theme/image_ELtedpG5.png)

### Button settings

Insert your button label and select the button style.&#x20;

If you don't want to show the button in the image card, simply leave the label blank.

![image](https://docs-assets.foxecom.app/megamog-theme/image_OaDDP2ri.png)