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.
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.
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
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