Lists
How to adding and style lists.
Lists can help organize content into easily scannable and digestible chunks. They break down information into discrete items, making it easier for users to understand and navigate through the content. Lists can also improve readability and can provide a visually appealing way to present information on a page.
Location in the Parts Library: Most used parts > Lists
Adding a List
To add a list, select the part where you’d like to add your list and click ‘+’.
There is a wide range of pre-styled lists for you to choose from. Some have icons, some have links parts that can be linked to other pages or external URLs, some have avatars and mask images, and some have a range of properties applied for variation.
Editing Lists
To edit a list, we first need to understand the structure of a list.
The parent part is the List, and within a List, there are several List Item parts. Text is contained within the List Items. In some example lists in the parts library, the List Items also have a prepend icon (that is, an icon positioned before the text). Some also have prepend avatars and prepend mask images.
The example below shows the structure of a list:
Editing Text Within a List Item
To edit the text within a List Item, select it to edit the text and replace it with your own.
Adding or Changing An Icon Within a List Item
To change the bullet point icon to a different icon, select the icon to activate the Icon Editor on the right. Then, select "Icon" and replace it with your preferred icon.
Here's an example of editing text and an icon within a list, and adding a link to a page from the list:
Adding or Changing an Avatar or Mask Within a List Item
To change the image within an avatar, select the image to activate the Image Editor on the right. Go to 'Image' and select or upload your preferred image. If you need to, adjust the rounding on the image to your preferred level of rounding via the Decoration Editor.
To change the mask image and shape, select the mask to activate the Mask Editor on the right. Go to 'Image' and select or upload your preferred image. To change the mask shape, go to 'Shape' and select your preferred mask shape.
Add a List Item to a List
To add a list item to a list, select an existing list item, and duplicate it using the edit menu in the top toolbar. Here's how:
Adding a Background Image To a List
To add a background image to your list, select the list, then go to the property editor in the right panel. Go to 'Image', then choose your preferred image from the Media Gallery or upload a new image. You can then adjust the opacity of the background image within the Decoration Editor as needed.
The image will take up the full background space of the list.
Related Information
Last updated
Was this helpful?