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

Last updated

Was this helpful?