Icon List widget

Create advanced Icon Lists using this widget.

Content

icon list widget content
icon list widget content 2

Icon List

Data Type: Choose between Static and Dynamic types.

You can add as many items as you wish by using Add Item button.

In the Item settings you can add the needed Text, Value, Link.

Static Data Type also allows to choose the Icon Type between Global and Custom and enable/disable Text Wrapping. 

Items

Layout: Choose between Row and Column layout.

Alignment: Choose between Left, Center, and Right alignment. In the Row layout, the Stretch alignment option is also available.

Direction: Select the direction — Default or Reverse.

In the Column layout, you can additionally define the Value Position, choosing between Bottom and Inline.

Marker

Type: Choose between Icon and Numeric type.

Icon Type allows to choose the Global Icon.

Numeric Type allows to set the Starting Number.

View: Choose between Default, Stacked and Framed views. 

Stacked and Framed views also allow to choose the Shape between Circle and Square.

Apply Link To: Choose where the link should be applied — to the Text, the Value, or the Full Width of the element.

Title: Add the needed List Title and choose the desired HTML tag from the dropdown. 

Style

icon list widget style list

List

Space Between: Set a space between elements for desktop, tablet portrait and mobile portrait modes.

Columns

Count: Set the columns count for desktop, tablet portrait and mobile portrait modes.

Divider: Slide to ON to enable divider between items and set it in a desired way.

icon list widget style item

Item

Typography: Set a typography using settings from the dropdown.

Color: Choose the item color for normal and hover modes.

Link Color: Set the link color for normal and hover modes.

Indent: Set the indent for desktop, tablet portrait and mobile portrait modes.

Text Shadow: Choose desired settings from the dropdown.

Value

Typography: Set a typography using settings from the dropdown.

Color: Choose the value color for normal and hover modes.

Link Color: Set the link color for normal and hover modes.

Indent: Set the indent for desktop, tablet portrait and mobile portrait modes.

Marker

Size: Set the marker size for desktop, tablet portrait and mobile portrait modes.

Vertical Alignment: Choose between Top, Center and Bottom alignment.

Primary Color: Choose the marker primary color for normal and hover modes.

Secondary Color: Set the marker secondary color for normal and hover modes.

Box Shadow: Choose desired settings from the dropdown.

Rotate: Applies rotation to the marker, allowing you to adjust its angle as needed.

Wrapper Size: Set the wrapper size for desktop, tablet portrait and mobile portrait modes.

Padding: Set paddings for desktop, tablet portrait and mobile portrait modes.

Border Radius: Set the border radius.

Alignment: Choose between Left, Center and Right marker alignment. 

 

Advanced

Set the Advanced options that are applicable to this widget

Related Articles