The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

The list element can be used to create numbered or bulleted lists of content.

In this lesson
  1. Adding a list
  2. Setting the list type
  3. Adding content to a list
  4. Styling a list

Adding a list

To add a list to your project, click on the Elements Panel (shortcut: A) and drag a list.


The list is made up of the main element and three list items.

Setting the list type

Depending on the settings, the main list element will be an unordered (bulleted) list or ordered (numbered) list. By default, the list is set to be unordered which will display bullet points on the left of each list item inside. To switch the between ordered and unordered lists access the list settings in one of the following ways:

  1. Select the main list element and press enter
  2. Select the main list element, press S to open the Element Settings Panel, change the list type under list settings

The bullets and numbers can also be removed in the list settings by checking no bullets.


Adding content to a list

By design, the list items don’t have any default, dummy content. This is because the list items can hold many different types of content—headings, paragraphs, images, videos, and even other lists. To add content to a list, simply drag it into a list item. You can also double click inside the list items to begin typing if all you want is a plain text list. Another way to enter text edit mode: select the list item and press enter.


Nesting lists

You can nest lists by simply adding a list inside of a list item. Reread that last sentence! It says add a list element inside of a list item because, yes, you cannot add a list element in a list element, only in a list item!

Creating new list items

To create a new list item, select an existing list item and copy and paste. Alternatively, you can right click on a list item and select Duplicate from the menu.


Styling a list

Both the list and the list items can be styled using the Style Panel.


The main list element—the ordered and unordered list element—can be styled by creating a class or by styling the tag. When you style the All Ordered Lists tag or All Unordered Lists tag, you’ll be defining the default styling for these elements throughout your project.   

  1. Select the main list element
  2. Click into the selector field
  3. Select All Ordered Lists (or All Unordered List)
  4. Customize your styles

You can increase or decrease the space where the bullets (or numbers) are by selecting the list and adjusting the left padding.


List item

You can apply the same class to all of the list items so that they have a consistent look. It’s common to change the bottom margin to create space between list items and left margin to create space between the text and the bullet/number.


The default styles can be set on all list items throughout your entire project by editing the All List Items tag:

  1. Select a list item
  2. Click into the selector field
  3. Select All List Items
  4. Add styles
Changing the All List Items tag will affect all list items when they are inside either the ordered list or unordered list.

Browser support

Can I Use ? Data on support for the feature across the major browsers from

Was this helpful?

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form