# Banner grid v0

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Add section**
2. Locate **Banner grid v0**
3. **Save**
   {% endhint %}

The Grid Banner section offers various style layouts that can be fully customized to suit your needs. You can adjust the image height or set it to adapt to different screen sizes for a responsive design. The number of items displayed can be tailored for desktop, tablet, and mobile views, ensuring an optimal appearance on all devices. Additionally, the banner allows you to customize colors, including backgrounds and text, to match your site's branding. Each banner item supports image or video uploads, with separate customization options for desktop and mobile, providing flexibility in presenting your content.

<figure><img src="https://content.gitbook.com/content/Y7qRoEtZDVZADcUOVdzb/blobs/OuD4IokgUmsvXAmXSDxX/image.png" alt=""><figcaption></figcaption></figure>

<figure><img src="https://content.gitbook.com/content/Y7qRoEtZDVZADcUOVdzb/blobs/FcR484j8LG32OdkV3uTL/image.png" alt=""><figcaption></figcaption></figure>

## General settings <a href="#id-1.-design-settings" id="id-1.-design-settings"></a>

<figure><img src="https://content.gitbook.com/content/Y7qRoEtZDVZADcUOVdzb/blobs/ejKWdjJnWAAFXSjHkhg8/image.png" alt=""><figcaption></figcaption></figure>

**Card settings**

<figure><img src="https://content.gitbook.com/content/Y7qRoEtZDVZADcUOVdzb/blobs/u8eVFsnweT9zP2RxgDpv/image.png" alt=""><figcaption></figcaption></figure>

**Layout settings**

<figure><img src="https://content.gitbook.com/content/Y7qRoEtZDVZADcUOVdzb/blobs/aLqpoyUZ7DOw0x7DsR8s/image.png" alt=""><figcaption></figcaption></figure>

Color settings

<figure><img src="https://content.gitbook.com/content/Y7qRoEtZDVZADcUOVdzb/blobs/vVGnoa2faEJNypqVsjYX/image.png" alt=""><figcaption></figcaption></figure>

**Spacing and Custom Attributes**

<figure><img src="https://content.gitbook.com/content/Y7qRoEtZDVZADcUOVdzb/blobs/WrKLrTuOjKR8yDlaLVgT/image.png" alt=""><figcaption></figcaption></figure>

### Blocks settings <a href="#block-settings" id="block-settings"></a>

**Image or video**

<figure><img src="https://content.gitbook.com/content/Y7qRoEtZDVZADcUOVdzb/blobs/4F6ZD8xorOM0pEpu9CMX/image.png" alt=""><figcaption></figcaption></figure>
