# Product List Element

The Product List Element is designed to showcase items like products, deals, or featured offers in a grid or list format. It includes built-in fields for price, rating, discount, and visuals — making it ideal for building modern store-like layouts.

***

{% tabs %}
{% tab title="Custom Tab" %}
This tab controls the title and call-to-action above the product cards.

### 📝 Title Section

* Show Title – Toggle visibility
* Title – Enter your section heading (e.g., “Burger & Wraps”)

### 🔗 CTA (Call-to-Action)

* Show CTA – Toggle to display a CTA link/button
* CTA Label – Text for the button (e.g., “View More”)
* Action URL – Enter a link or internal screen (e.g., <https://buegerhouse.com> or twinr://products)
  {% endtab %}

{% tab title="Settings Tab" %}

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

### 📐 Layout

* List Type: Grid List / Vertical List / Horizontal List
* Columns (1 to 4 for grid layout)
* Spacing Between Items: Adjust horizontal/vertical gaps

### 🏷 Title & CTA

* Title Text Style + Color
* CTA Text Style + Color

### 🎨 Card Design

* Card Ratio: 1:1, 4:3, etc.
* Card Background Color
* Corner Radius for the full card

### 🛒 Item Fields

Each product card includes the following fields:

**✅ Title**

* Text Style, Font Size, Font Weight, and Color

**✅ Description**

* Secondary info or product detail
* Customizable in same way as title

**✅ Price**

* Bold pricing text
* Font Style, Weight, Size, and Color

**✅ Strikethrough Price (Original Price)**

* Optional for showing discounts
* Styled separately

**✅ Discount %**

* You can highlight % off using a separate text field

**✅ Rating Star**

* Star color (custom HEX)

**✅ Rating Text**

* e.g., “4.2”, “(89 reviews)”
* Fully stylable text

**✅ Review Counter**

* Optional total count next to stars
* Size and color customizable

**✅ Image Style**

* You can select fit or fill display mode

### 📏 Margin

You can set:

* Top / Bottom / Left / Right spacing for the card block

### 👁️ Visibility

Show or hide this block conditionally:

* By Platform: iOS / Android / PWA
* By Device: Mobile / Tablet
* By User: Guest / Logged-in
  {% endtab %}
  {% endtabs %}

## <mark style="color:green;">✅ Use Case Ideas</mark>

| Use Case        | Description                                |
| --------------- | ------------------------------------------ |
| Product catalog | Browse items in a store                    |
| Featured deals  | “Top Picks” or “New Arrivals” section      |
| Combo bundles   | Highlight paired product sets              |
| Flash sale      | Time-sensitive list with discounts & stars |

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

Looks like a native product list — with clean pricing, discount ribbons, star ratings, and more.

<figure><img src="/files/B9fKoSnrOeK1Yq13ZQSe" alt="" width="240"><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.twinr.dev/native-screen/product-list-element.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.