Skip to main content

​
Overview

The List-Item component displays structured information in a visually appealing format across all channels.

Perfect for:

Products, hotel rooms, menu items, articles, search results - any list of options

​
Format

::: list-item
![image](Image-URL)
# Item Title
Brief summary of the item (price, availability, key details — max ~40 words).
:::
The title must be a # line (hash followed by a space). There is no separate subheading — put the price, stock, or other key details at the start of the description.

​
Requirements

Unique Titles

Each item must have a unique title

10 Item Max

Maximum 10 items per response

Images Optional

Include when available

Concise

~40 words max per summary

​
Complete Examples

​
E-commerce Product

::: list-item
![image](https://cdn.example.com/laptop-pro.jpg)
# UltraBook Pro Laptop
$1,299.00 · In Stock. Professional-grade laptop with 16GB RAM, 512GB SSD, and a stunning 14" Retina display. Perfect for developers and content creators. Free 2-day shipping.
:::
List-items rendered in the Lua Pop web widget
List-items rendered in the Lua Pop web widget.

​
Hotel Room

::: list-item
![image](https://hotel.example.com/deluxe-ocean.jpg)
# Deluxe Ocean View Suite
$250/night · 3 rooms available. Spacious suite with king bed, private ocean-facing balcony, and modern amenities. Includes complimentary breakfast, WiFi, and parking. Maximum 2 guests.
:::

​
Restaurant Menu Item

::: list-item
![image](https://restaurant.example.com/pasta-special.jpg)
# Chef's Seafood Linguine
$24.99 · Available tonight. Handmade linguine with fresh seafood, cherry tomatoes, and basil in a white wine sauce. Served with garlic bread. Gluten-free option on request.
:::

​
How to Configure

​
In Persona

persona: |
  When showing products, ALWAYS use list-item format:
  
  ::: list-item
  ![image](product-image-url)
  # Product Name
  $Price · Stock status. Product description here.
  :::
  
  Format each product individually. Maximum 10 products per response.

​
In Skill Context

const ecommerceSkill = new LuaSkill({
  context: `
    When search_products returns results, format each as:
    
    ::: list-item
    ![image](product.imageUrl)
    # product.name
    $product.price · product.stockStatus. product.description
    :::
    
    Always include image if available.
  `
});

​
Best Practices

✅ Good:
# Deluxe Ocean View
# Standard Garden View

❌ Bad:
# Room Option
# Room Option
There’s no subheading — open the description with price, availability, or other key details.
✅ Good:
# Deluxe Ocean View
$250/night · Available. King bed, private balcony.

❌ Bad:
# Deluxe Ocean View
A room.

✅ Good: ~40 words with key features
❌ Bad: 200 word essay
  • High resolution
  • Direct image URLs
  • Web-accessible (HTTPS)
  • Representative of item

​
Next Steps

Actions Component

Add interactive buttons after lists

Configure Persona

Add formatting instructions