# List items

<figure><img src="/files/cyNhZJpNqUUWAknrWNz1" alt=""><figcaption></figcaption></figure>

Use the **List items** element to display text having the same layout, but containing unique content in each. List items are great at emphasizing product benefits, key features, or quick selling points for better conversion.

## How to add List items

{% hint style="success" %}
**Steps:**

1. In the FoxStudio editor, on the left Sidebar > Click **Add elements**, or press **E**.
2. Select **Lists** > **List items.**
3. Drag the List items onto your canvas.
   {% endhint %}

## How to edit List items

{% hint style="success" %}
**Steps:**

1. **Select** the relevant list items element in the editor.
2. All the formatting tools for the element can be found in the right-handsided **Inspector** panel.
   {% endhint %}

### General settings

#### Manage list items

Click **Add item** to add more to your list.

You can also remove/duplicate/reorder an item within the list.

<figure><img src="/files/InRHU22dc0jRH0eEwXX7" alt=""><figcaption></figcaption></figure>

You can view and manage the content of each list item individually. Options include:

* **Text**: Enter the text content for the list item.
* **Link**: Add a clickable link to the list item if needed. This is useful for directing users to a product page or more information. If you don't need links, leave this field blank.
* **Icon**: Add or change an icon next to the list item text. You can adjust the size of the icon using the slider.

<figure><img src="/files/XhBQJbZHkj1jJlpbiLFL" alt=""><figcaption></figcaption></figure>

#### List style

{% hint style="warning" %}
If an icon is set for the list item, the icon will replace the list style.
{% endhint %}

* Select a style for list formatting:
  * None (no bullets)
  * Disc
  * Circle
  * Decimal (numbered list)
  * Square
  * Disclosure closed/open (useful for dropdown-like lists)

⭐ **Tip**: Use "Disc" or "Circle" for simple bullets and "Decimal" for ordered steps.

### Design settings

{% hint style="success" %}
Target specific parts of the Contact form for customization:

* **Element container**: Adjust text styles for items, wrapper's background colors, padding, borders, and spacing.
* **List items:** Adjust spacing, borders, and background color for individual list items.
  {% endhint %}

<figure><img src="/files/t2YdSMRyCMVsgRXjurws" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements/list-items.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.