List item element

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.

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.

Comments

• Add comments - Add comments to the Element.  For more information, see Adding comments to an element.