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