Overview
The List element renders as a <ul> or <ol> tag containing list-item children. Use it to display bulleted lists, numbered lists, or custom styled lists in your content.
When you add a List element, it automatically creates 3 list-item children to get you started. The list uses space-y-2 as the default spacing between items and supports multiple marker styles including bullets, numbers, letters, and Roman numerals.
The List element uses a child-based structure where each list item is a separate element. This allows you to style individual items differently or nest other elements within items.
Settings
Configure your list using these settings in the Inspector panel:
| Setting | Description | Options | Default |
|---|---|---|---|
| List Style | The type of marker displayed before each item | disc (bullet), decimal (numbered), none, circle, square, alpha (a, b, c), roman (i, ii, iii) |
disc |
| List Position | Position of the marker relative to the list item content | inside, outside |
inside |
| Spacing | Vertical spacing between list items | Tailwind spacing classes | space-y-2 |
List Item Management
Each list item is a separate element that you can manage individually:
Editing Items
- Edit text: Click a list item on the canvas to select it, then click again to edit the text inline
- Style items: Select a list item and use the Inspector to apply custom classes or styles
Adding and Removing Items
- Add via Structure panel: Right-click the List in the Structure panel and select "Add Child" to insert a new list-item
- Duplicate existing: Select a list item and press Ctrl+D to duplicate it
- Delete items: Select a list item and press Delete to remove it
Reordering Items
- Drag in Structure panel: Open the Structure panel and drag list items to reorder them within the list
- Keyboard shortcuts: Select a list item and use Ctrl+↑ or Ctrl+↓ to move it up or down
Examples
Bulleted List (Default)
A standard unordered list with bullet markers:
<ul class="space-y-2 list-disc list-inside">
<li>First item in the list</li>
<li>Second item with more content</li>
<li>Third item to complete the list</li>
</ul>Numbered List
An ordered list with decimal markers for step-by-step instructions:
<ol class="space-y-2 list-decimal list-inside">
<li>Open the Settings panel</li>
<li>Navigate to the API section</li>
<li>Generate a new API key</li>
<li>Copy the key to your application</li>
</ol>Checklist Style
Use list-none and add custom markers via CSS or icons for checklist-style lists:
<ul class="space-y-2 list-none">
<li class="flex items-center gap-2">
<span class="text-green-500">✓</span>
Feature one included
</li>
<li class="flex items-center gap-2">
<span class="text-green-500">✓</span>
Feature two included
</li>
<li class="flex items-center gap-2">
<span class="text-gray-400">✗</span>
Feature three not included
</li>
</ul>