logo
Documents |

List

Table of Content

Using List Elements: A Guide

Lists are versatile elements in web design. They can be either numbered or bulleted.

1. Inserting a List

To embed a list on your webpage, navigate to the Add panel > basic and click the List icon to add it to the Nilead workspace.

The List icon is spotlighted in the Add panel.
The List icon is spotlighted in the Add panel.

2. Defining the Type of List

The primary list can either be unordered (bulleted) or ordered (numbered). By default, it's an unordered list, displaying bullets next to each entry. Toggle between these two options by selecting the main list element and going to its config:

chrome_2023-08-22_10-54-43
List element configurations

3. Populating a List with Content

List items come empty by default, allowing for diverse content types such as headings, images, videos, or even sub-lists. Add your desired content into a list item.

chrome_2023-08-22_11-22-46
A list element is used to show a notification feed.

4. Nesting Lists

Lists can be layered by placing one inside another, although you cannot directly embed one list element within another.

Steps to Nest Lists:

  1. Select the List Item that you want to add a List inside.

  2. Add a List element from the Add panel following the step 1: Inserting a List.

Tip: First, set up the nested list's structure before adding any text. Once you've edited a primary list item, you can't insert a nested list. However, you can still add other elements and then include a sub-list.


5. Creating Additional List Items

For a new list entry, copy an existing one and paste. Or, click on a list item menu and pick Duplicate from the dropdown.

Duplicate an element using its own menu
Duplicate an element using its own menu

Enhancing the Appearance of Your List

Both the primary list and its items can be beautified using the Style panel:

Style tab of an element
Style tab of an element

Share

DIscord chat

We're available Monday–Friday, security and critical bug fixes are available 24/7.

Facebook page

Get the latest news and updates regarding Nilead platform and services.