Elements and Widgets

List

4min



List is a widget for organizing content in blocks with a repeated structure.

Document image


The List consists of a parent block with child elements inside with the same structure and styles by default. This widget can be used, for example, to create a list of goods or services on a website, news, reviews, rates, or benefits. 

Document image


By default, there is a Text block inside each child element of the List. You can also add any other elements and widgets to the List element, except for the Form. For example, you can add an image or an icon. It is enough to add an element to one of the elements of the List so that it will be automatically added to all other elements. 

List styles

You can add styles to the List using the Styles tab in the right panel. You can style both the entire List block and its individual elements. For example, you can set one background to the entire List and another to its elements. 

Document image


When styling elements, it is enough to change the styles of one of them so that the styles of other elements change automatically. For example, you can set text styles and margins to one list item and they will be applied to the rest of the list items.

You can apply any necessary styles to the List, as well as to other elements. For example, to style a List you can:

  • change the radius to round the corners of the list items (in the Size section)
  • change margins and paddings for list items (in the Size section)
  • change the font, its size, and color (in the Text section)
  • change the background color and borders of the List or its elements (in the Background and Borders sections)
  • add a shadow to the list items (in the Effects section)

You can arrange the list items horizontally or vertically using the Display settings. To do this, set the List display mode to Flex and select the direction and horizontal and vertical alignment in the Auto Layout settings.

List settings

You can add, copy, delete, and reorder list items in the List settings on the Settings tab of the right panel.

Document image


You can use Apply an independent structure option with a List. It will make the structure of the list items independent of each other. Thus, each list item can have different elements and widgets with different styles. The list items themselves will have the same styles.

You can enable this option on the Settings tab in the right panel. Once this setting is enabled, it cannot be cancelled. List items with an independent structure have additional option allowing to hide them.

Document image