Back to all lessons
Lesson library

List

Use the List element to create numbered or bulleted lists of content.

 
This video features an old UI. Updated version coming soon!

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

In this lesson:

  1. Add a list
  2. Set the list type
  3. Add content to a list
  4. Style a list

Add a list

The List element icon.

To add a list element to your site, click the Add panel (shortcut: A) and drag a List onto the Webflow canvas.

In the left picture, the list element is highlighted in the Add panel. In the right picture, a list is shown in the canvas.

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

A list and its three list items are shown in the Navigator.

Set 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 to the left of each list item inside. You can switch between ordered and unordered lists in 2 ways:

  1. Select the main list element and press Enter
  2. Select the main list element and go to Settings panel > List settings, then change the type
The unordered and ordered Types are highlighted in List settings.

You can also remove the bullets and numbers in the list settings by choosing no bullets.

The No bullets Style is highlighted in the List settings.

Add content to a list

By design, the list items don’t have any default 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 is to select the list item and press Enter/Return.

In the top picture, an image is added to the first list item of an unordered list. In the bottom picture, the words “Amazing,” “Wonderful,” and “Spectacular” are added to three list items of an unordered list.

Nest lists

You can nest lists by adding a list inside a list item (you can't nest list elements).

Nested lists inside of list items.

To nest a list within a list item:

  1. Drag a List from the Add panel onto the canvas
  2. Nest a child List within a list item of the parent List
  3. Nest a text element (paragraph, text block, heading, etc.) in the list item of the parent List element, above the child List
Note: Make sure you create the structure of the nested list before adding text to the list item. A nested list cannot be placed inside of a parent list item after the parent list item is edited (although you can add an element to the parent list item and still nest a child list inside afterwards).
An annotated bullet list and a text element are nested inside the first list item of a numbered list.
In the Navigator, a list element and a paragraph element are nested inside the first list item of a parent list element.

Create 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.

The Duplicate option is highlighted in the menu that appears after right-clicking a list item.

Style a list

You can style both the list and the list items using the Style panel.

List

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 site.   

  1. Select the main List element
  2. Open Style panel > Selector field
  3. Select All ordered lists (or All Unordered lists)
  4. Customize your styles
The All unordered lists tag is highlighted in the Selector field dropdown in the Style panel.

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

In the left picture, 52 pixels of left padding are added to three list items on the canvas. In the right picture, 52 pixels of left padding are shown in the Spacing section of the Style panel.

List item

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 the left margin to create space between the text and the bullet or number.

A "Major list item" class is added to a list item and displayed in the Selector field.

Default styles can be set on all list items throughout your entire site by editing the All list items tag:

  1. Select a List item
  2. Open Style panel > Selector field
  3. Select the All list items tag
  4. Add styles
Note: Changing the All list items tag will affect all list items whether they are inside either an ordered or unordered list.
The All list items tag is selected and appears in the Style panel’s Selector field.
Try Webflow — it's free