List

List fields repeat their child elements based on array data. Each item in the array creates one instance of the child template.

For detailed best practices, see List Tips.

Use Cases

Feature lists
Team member grids
Product catalogs
Bullet points
Repeating cards

Editor Settings

Setting	Description
Direction	Stack direction (Vertical or Horizontal)
Gap	Spacing between items (in pixels)
Padding	Internal padding (in pixels)

Direction Modes

Vertical:                    Horizontal:
┌─────────────────┐         ┌─────────────────────────────┐
│ ┌─────────────┐ │         │ ┌───────┐ ┌───────┐ ┌─────┐ │
│ │   Item 1    │ │         │ │ Item  │ │ Item  │ │Item │ │
│ └─────────────┘ │         │ │  1    │ │  2    │ │ 3   │ │
│ ┌─────────────┐ │         │ └───────┘ └───────┘ └─────┘ │
│ │   Item 2    │ │         └─────────────────────────────┘
│ └─────────────┘ │
│ ┌─────────────┐ │
│ │   Item 3    │ │
│ └─────────────┘ │
└─────────────────┘

Direction	Behavior	Use Case
Vertical	Items stack top to bottom	Feature lists, bullet points
Horizontal	Items flow left to right	Icon bars, tag lists

Sizing Behavior

Mode	Effect
Fixed	List has exact pixel dimensions
Hug	List shrinks to fit its items
Fill	Fills parent container (only when nested)

API Content Format

Lists expect an array of objects:

{
  "content": {
    "feature_list": [
      {
        "feature_icon": "https://example.com/icon1.png",
        "feature_title": "Fast",
        "feature_description": "Lightning speed"
      },
      {
        "feature_icon": "https://example.com/icon2.png",
        "feature_title": "Secure",
        "feature_description": "Bank-level encryption"
      },
      {
        "feature_icon": "https://example.com/icon3.png",
        "feature_title": "Simple",
        "feature_description": "Easy to use"
      }
    ]
  }
}

List with Group Children

For complex list items, use a Group as the List's child:

List (vertical)
└── Group (child template)
    ├── Image (icon)
    └── Text (label)

Each array item creates one Group instance.

Important Notes

Child elements define the template for each item
Array length determines number of repeated items
Design for variable item counts (1 to many)
Use consistent field key prefixes (e.g., feature_icon, feature_title)

Examples

For detailed patterns and configurations, see List Tips.

Quick Reference:

Pattern	Direction	Child Configuration
Feature List	Vertical	Group: Icon (Hug) + Text (Fill)
Team Grid	Horizontal	Group: Fixed width cards
Tag Cloud	Horizontal	Text with Hug sizing
Bullet Points	Vertical	Group: Bullet + Text

Best Practices

See List Tips for detailed guidance on:

Using Groups as children for flexibility
Matching sizing to direction
Planning for variable item counts
Naming conventions for List fields
Troubleshooting common issues

On this page