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:
- Navigate to a component or a template with the Layout canvas
- Click the + button on the Layout canvas
- 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:
- Click on Properties
- Click on Settings
- Click on the List value check box
- 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:
- 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
- Click on the Expand icon to open the List item on the Layout canvas
- Click on the + button to open the Sidebar browser
- Drag an Element inside the List item element on the Layout canvas.
- List value - Enter content for the list item
- 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
- 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 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.
- Add comments - Add comments to the Element. For more information, see Adding comments to an element.