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
##Item Subheading
Brief summary of the item (max ~40 words).
:::

​
Requirements

Unique Titles

Each item must have unique heading and subheading

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 stunning 14" Retina display. Perfect for developers and content creators. Free 2-day shipping on orders over $50.
:::
Product in WhatsApp
Screenshot: Product list item in WhatsApp showing image, title, price, and description
Product in Facebook
Screenshot: Same product in Facebook Messenger

​
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 balcony overlooking the ocean, and modern amenities. Includes complimentary breakfast, WiFi, and parking. Maximum 2 guests.
:::
Hotel in Instagram
Screenshot: Hotel room in Instagram DM

​
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 white wine sauce. Served with garlic bread. Gluten-free option available upon request.
:::
Menu in Email
Screenshot: Menu item formatted in Email

​
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

✅ Good:
##$250/night - Available
##$45.99 - Chef's Recommendation
##$1,299 - In Stock, Free Shipping

❌ Bad:
##Product Info
##Details

✅ 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