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.

Example Lists

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:

The Components 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:

Updating Text, Icon and Link within a 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.

Changing an Image in a List, and Applying Rounding to the Image

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.

Changing an Image and Mask Shape within a List

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:

Duplicating a List Item

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.

Adding a Background Image to a List

Related Information

Text

Icons

Adding links

Images

Customizing and formatting