# List Grid Element

The List Grid element allows you to display multiple items in a compact, visual grid. It’s perfect for showing categories like “Shop by Department”, “Top Picks”, or “Explore More”. Each item can have an image, label, and a link to another screen or website.

{% tabs %}
{% tab title="Custom Tab" %}

## <mark style="color:green;">Add Items to Your Grid</mark>

### Title and CTA

* Show Title – Toggle on/off to display a heading above your grid (e.g., “Top Selling Products”)
  * Title Text – Enter your heading text
* Show CTA – Add a small “See All” link on the right
  * CTA Label – Customize the link text (e.g., “See All”, “Explore”)
* Action URL – Link to another screen or external site

### List Items

You can add as many grid items as you want. For each item, you can:

* 🖼️ Upload an Image and select background color
* ✏️ Add a Title (e.g., “Fruit & Vegetables”)
* 🔗 Link it to a URL or screen (in settings for each item)

📌 **Tip**: Use square or round icons for a clean and uniform grid look.
{% endtab %}

{% tab title="Settings Tab" %}

## <mark style="color:green;">Design & Customization</mark>

### 📐 Layout

* Choose List Type: Set to Grid List by default
* Columns: Choose how many items per row – 1, 2, 3, or 4
* Spacing Between Items: Adjust spacing using the slider (e.g., 10px)

### 🖋 Title & CTA Style

Customize the section heading and call-to-action (CTA) link:

* **Title**:
  * Text Style (e.g., Body Medium)
  * Color (custom HEX or theme-based)
* **CTA**:
  * Text Style (e.g., Label Large)
  * Color (custom HEX or theme-based)

### 🗂️ Card Style

This section controls how each list item looks inside the grid.

* **Ratio**: Set aspect ratio (e.g., 1:1 for square)
* **Text Position**:
  * On Image (overlay text on image)
  * Under Image (text below image)
* **Text Alignment**: Left, Center, or Right
* **Image Style**:
  * Display Mode: Fit (contain) or Fill (cover)
  * Corner Radius: Adjust roundness from square to fully rounded
  * Apply Overlay: Toggle overlay for better text contrast when text is “On Image”

### 🏷️ Item Fields

Customize the style of the individual item titles:

* Text Style (e.g., Body Medium)
* Color (HEX or theme)
* Margins (Top, Bottom, Left, Right) – adjustable using sliders

### 👁️ Visibility Settings

Like other elements, control when and where your List Grid appears:

* Platform: Android, iOS, or All
* Device: Mobile, Tablet, or All
* User: Guest, Logged-in, or All
  {% endtab %}
  {% endtabs %}

## <mark style="color:green;">📱 Use Cases</mark>

<div align="left"><figure><img src="https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2F6qpgX9kF5uYzmz1q43fD%2FScreenshot%202025-05-21%20at%206.52.17%E2%80%AFPM.png?alt=media&#x26;token=a862efa2-359e-411b-85c3-df97c59d3c7e" alt="" width="237"><figcaption></figcaption></figure></div>

* 🍎 Category list (e.g., Fruits, Dairy, Bakery)
* 🛍️ Shop sections (e.g., Men, Women, Kids)
* 🧭 Navigation shortcuts (e.g., About, Services, Contact)

***

## ✅ <mark style="color:green;">Summary</mark>

| Tab         | Customization Options                               |
| ----------- | --------------------------------------------------- |
| Layout      | Columns, spacing, list type                         |
| Title & CTA | Text style and color                                |
| Card Design | Image ratio, text position/alignment, corner radius |
| Item Fields | Title font, color, and margins                      |
| Visibility  | Show by platform, device, or user role              |