Use the List element to create numbered or bulleted lists of content.
The List element can be used to create numbered or bulleted Lists.
In this lesson:
To add a List to your project, click the Elements Panel (shortcut: A) and drag a List onto the canvas.
The List is made of the main element and three List items.
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. You can switch between ordered and unordered Lists in 2 ways:
The bullets and numbers can also be removed in the List settings by checking No bullets.
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 plain text. Another way to enter text edit mode: select the List item and press Enter.
You can nest lists by adding a List inside a List item (you can't nest list elements).
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.
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.
You can increase or decrease the space where the bullets (or numbers) are by selecting the List and adjusting the left padding.
You can apply the same class to all of the List items so 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:
Something went wrong while submitting the form. Please contact support@webflow.com
Got a lesson suggestion? Let us know
Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback