List Layout Prompts

List layouts are everywhere in real apps. Mastering how to describe them precisely means you can generate clean, scannable UIs for any data collection.

---

What Makes a Good List Layout Prompt

Before diving into templates, a basic list layout prompt should specify:

• Left area — avatar, icon, or image
• Center area — primary text (name, title) and secondary text (role, description)
• Right area — action buttons, timestamps, chevrons, or toggles
• State behavior — hover effects, active/selected states
• Dividers — visible separators vs. whitespace between rows

---

List Layout Templates

User Profile List

Create a list of user profiles with circular avatar images on the left,
name and role information in the middle, and a chevron icon button on the right.
Add subtle hover effects on each row.

---

Contact List

Create a contacts list with:
- User avatars on the left (circular, 40px)
- Name and job title in the center (name in bold, title in gray)
- Action buttons on the right: call icon and message icon
Use subtle hover effects for interactivity.

---

Settings Menu List

Design a settings menu with:
- Left-aligned icons (24px, muted color) next to each setting name
- Toggle switches aligned to the right
- Section dividers between setting groups
- Subtle background highlight for the currently active setting

---

Notification Feed

Create a notification feed with:
- Color-coded left borders (red for alerts, blue for info, green for success)
- Notification content and title
- Relative timestamps (e.g., "5 minutes ago") on the right
- An unread indicator dot on the left
- A dismiss (×) button on hover

---

Product List

Design a product list for an e-commerce app with:
- Product image on the left (48x48px, rounded corners)
- Product name and brief description in the center
- Price (bold) and rating stars below the name
- An add-to-cart button on the right
- Stock availability indicator (e.g., "In stock" in green)

---

Best Practices for List Prompts

Element	What to specify
Item height	Minimum 44px for mobile touch targets
Avatar size	Exact pixel size (e.g., “40px circular avatar”)
Dividers	”1px border-bottom” or “whitespace only”
Hover state	Color, background, or underline change
Empty state	Message shown when the list is empty

---

Combining Lists with Other Patterns

List layouts pair naturally with search bars and filter controls:

Create a searchable contact list with:
1. A search input at the top that filters results in real time
2. An alphabetical section header (e.g., "A", "B") as each group starts
3. Each row: circular avatar, name, and phone number
4. A sticky header that shows the current letter as the user scrolls

---