List Element
An overview of the list component.
Last updated
An overview of the list component.
Last updated
The list component can be used to create numbered or bulleted lists of content.
In this tutorial you will learn how to:
Add a list
Set bullet point & number types for your list
Add content to your list
Adding new list items
Give a style to your list
To add a list to the canvas, first find the list component in the components panel.
It is possible to add the link block either through (1) by selecting the list component & dragging & dropping it onto the canvas or (2) using the arrow buttons at the top of the components panel.
The default list is made up of three list items.
When you add a list to the screen, it will automatically be added as what is known as an "unordered" list. An unordered list is just a bulleted list of items, as shown below.
An "ordered" list is just a list of items that contain numbered bullets, as shown below.
To switch between ordered & unordered lists, this can be done in two places. First is by selecting the list component & then using the on canvas popup for the list component.
You can also change the type of list from the styles panel, where there are more options for changing the list styles.
Pro tip: notice, when you change the list style from the styles panel, this will override the list style set on the canvas.
When you add your list to the canvas, the default lists items are empty. You nest any number of components inside a list item. For example, adding text components, div blocks or even lists to create lists within lists.
You are able to add new list items several different ways. First you can select the list component on the canvas, make sure that you have the correct component selected by checking the breadcrumb trail at the bottom of the page.
You can then pick the list item component off the panel & then use the forward facing, or backward facing arrows to add the list item to the start or the end of the list.
Pick the list item from the component panel.
Use the backwards facing arrow to add the list item as the last component of the list or use the forward facing arrow to add the list item as the first component of the list.
Another way to add a new list component is to use the "clone" option. To do this, select a list item & then go to Edit > Clone & this will clone the selected component.
Finally, you can use the copy paste shortcut keys to add a list item. To do this, (A) copy the list item on the canvas, (B) select the list component & (C) paste the list item inside the list component.
Once a new list item has been added, you're able to add new content to the list item in the usual way.
As with other components, both the list component & the list item component can be styled using the Style Panel.
As mentioned in the section above, you can change the type of list from ordered to unordered (numbered or un-numbered).
Another style that is commonly applied to a list component is to change the indentation of the list. This can be done by adding padding to the left hand side of the component.
List item components can be modified in the same way. Notice, in the example below holding down Ctrl on Windows or Command on Mac allows you to select multiple items.
