Version:

    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.

    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.

    Comments

    DX8 knowledge base icon

    Frequently asked questions

    Get instant answers to common questions. Available online 24/7.

    Find answers

    Raise a ticket icon

    Raise a support ticket

    To raise a ticket, sign into Acquia Cloud and select Help in the top menu.

    Raise support ticket

    Acquia

    Copyright © 2020 Acquia, Inc. All Rights Reserved. Drupal is a registered trademark of Dries Buytaert.