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
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.
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
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.
Site Studio