Icon List Block

A simple list with icons.

  • A list of items with a custom icons
  • One more item
  • And another one
  • What about one more?
  • Yes, can add as many as you want

What about dividers and custom icons per item?

  • One more item
  • And another one
  • What about one more?
  • Yes, can add as many as you want
  • A list of items with a custom icons

List Settings

This section will help you configure the list. Let’s check out the available options.

  1. List Layout: Choose between a normal or an inline list.
  2. List Item Spacing: Set the default spacing between list items.
  3. List Alignment: Choose the alignment of the list, available options are left, center and right.
  4. List Item Link Display: Choose if you want to display the list items as inline or block level elements.
  5. List Item Separator Width: Set the desired width of the list item separator.
  6. List Item Separator Color: Set the color of the separator.

Notice that the List Item Spacing option has three icons next to the label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the control’s values for each device.


Font Size Settings

This section controls the font sizes for the list icons and text. You can set the font size either via a drop down of preset values or by setting an exact pixel value in the input.

Notice that the Font Size options have three icons next to the label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the control’s values for each device.


Block Appearance

Under the block appearance tab you can control how the block looks. Let’s check out the options.

  1. Text Color: This option allows you to set the color for the list’s text.
  2. Icon Color: This option controls the color of the list icons.
  3. Background Color: This option controls the list’s background color.
  4. Border: This option allows you to select the border style via the drop down and then select the border color and width.
  5. Border Radius: This option allows you to round the heading block’s corners.
  6. Box Shadow: This option allows you to apply an inset/outset box shadow, its color, spread, blur radius and offset.
  7. Padding: With this option you can individually control the padding on each side of the block.
  8. Margin: With this option you can individually control the margin on each side of the block.

Notice that the Padding and Margin options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the values of padding/margin for each device.


Visibility Settings

Via the Visibility Settings you can hide the block for certain type of device or user.

The Viewport visibility toggles allow you to hide the block on desktops, tablets and mobiles. You can choose to hide it on more than one device type.

The Authentication visibility toggles allow you to display the block only to logged in or logged out users.


Icon List Item Settings

By selecting each Icon List Item you can configure its icon via a handy drop down, add a URL where the list item will link to when clicked and choose if you want it to open the link in a new tab.