Icon List creates an easy to manage list of items with each item specified by its own icon. You can create a list of features, points to remember, group of only icons or anything as per your content.
Similar to other JD Builder elements this elements also has the content option in General tab and styling options in Design tab.
So firstly we have the General tab that only has Icon List sub tab where you need to add the icons and their respective titles.
- List Items- You can add as many icons as you want in the list using the repeatable field.
- Layout- Select the layout of the icon list whether Default or Inline.
Next we have the main Design tab that includes the styling options.
Here the first tab is the List tab, where you have the overall list styling options that are as follows:-
- Space Between Items- Adjust the spacing between each item of the list.
- Alignment- Set the alignment of the icon list.
- Enable Divider- If you want to add a divider in between the items then enable it. This will further reopen the following options:
- Divider Style- Choose the style of the divider be it solid, double, dotted or dashed.
- Divider Weight- Adjust the weight of the divider.
- Divider Width/Height- Adjust the divider width when in default layout and height when layout is Inline.
- Divider Color- Set the color of the divider.
Then we have the Icon tab, where we have the options to style the icon:-
- Icon Colors- Se the icons color and its background color in normal & hover states.
- Icon Size- Set the icons size.
- Icon Border Options- Set the icons background border and add icon’s box shadow.
- Space Between Icon & Text- Adjust the spacing between icon and text.
Then finally we have the Text tab, where if you have added the title you can style it here:-
- Text Colors- Set the title’s text color on normal state and hover state.
- Text Typography- Set the title’s typography by adding font size, style and others.
