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.

Content Tab – Add Items to Your Grid

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.

---

Settings Tab – Design & Customization

📐 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

---

📱 Use Cases

• 🍎 Category list (e.g., Fruits, Dairy, Bakery)

• 🛍️ Shop sections (e.g., Men, Women, Kids)

• 🧭 Navigation shortcuts (e.g., About, Services, Contact)

---

✅ Summary

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