---
title: "List item element"
date: "2017-11-12T09:28:26+00:00"
summary: "Easily create structured lists with Site Studio's List item element. Learn how to add content, customize list types, and style your list items for enhanced web design flexibility."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/list-item-element"
id: "1a375d38-e2ab-4bdd-9794-a2f6c7b75441"
---

Table of contents will be added

Use the List item element to add a list item to your List container. 

Locating the list item element
------------------------------

To find the List item element:

1.  Navigate to a component or a template with the Layout canvas
2.  Click the **+ button** on the Layout canvas
3.  Within the Elements tab, look for the List item element.

![dbc4d4a5-list-item.png](https://acquia.widen.net/content/7a27c738-8f20-491d-901b-a728737e1c15/web/dbc4d4a5-list-item.png)

The List item element includes the following fields:

Using the list item as a content item
-------------------------------------

The List item can be used as a content item. You can add text content directly to the list item using the List value field. This field is not shown by default. To add the List value field:

1.  Click on **Properties**
2.  Click on **Settings**
3.  Click on the **List value check box**
4.  Enter a value in the **List value** field.

Using the list item as a container
----------------------------------

The List item can be used as a container so you can add child elements to it. For example: You can add a Link element within your List item to create a list of links.

To add child elements to a list item:

1.  Make sure you are not using the **List value field** within the List item as this will be ignored. Remove the field or remove any content from within it
2.  Click on the **Expand icon** to open the List item on the Layout canvas
3.  Click on the **\+ button** to open the Sidebar browser
4.  Drag an Element inside the List item element on the Layout canvas.

List value
----------

*   **List value** - Enter content for the list item

List item type
--------------

*   **List item type** - Set the list item type:
    *   List item (li) - Use with ordered and unordered lists
    *   Description term (dt) - Use with description lists
    *   Description term description (dd) - Use with description lists

Custom style
------------

*   **List item style** - Apply a Custom style to a List item. This will override any style properties applied to List items within Base and Custom Ordered and Unordered lists.

Match heights
-------------

*   **Match heights** \- Match the height of the element using:
    *   **None** - Removes the match heights at the specific breakpoint
    *   **Class** \- Match the height of the element with another element with the same class name
    *   **Children with class** - Match the heights of any child elements with the same class name
    *   **Child element** - Match the heights of all child elements of the same type.

For more information on Match heights, see [Match the heights of elements.](/drupal-starter-kits/add-ons/site-studio/match-heights-elements "Match the heights of elements")

Comments
--------

*   **Add comments -** Add comments to the Element.  For more information, see [Adding comments to an element](/drupal-starter-kits/add-ons/site-studio/adding-comments-element "Adding comments to an element").