Icon List
A list of short items with icons, stacked or inline.
The Icon List shows short items with an icon in front of each: a checklist of what is included, contact details with phone and email icons, or a row of footer links. Items can be links, stacked or side by side, in one or more columns.
Add an icon list
Insert it
Open Insert in the left panel, find Icon List under Basic (or type
icon listin Search widgets) and click it or drag it onto the canvas.Write the items
In Content → Icon list → Items, click an item to edit its Text, Icon and Link. Add item adds one; drag the handle to reorder.
Choose the layout
Keep Vertical for a stacked list, or choose Inline to put the items side by side. A vertical list can use several Columns.
Settings
Settings marked Per device can differ on desktop, tablet and mobile (see Responsive editing). Item texts and links support dynamic tags (see Dynamic tags).
Content tab
Icon list
| Setting | What it does |
|---|---|
| Items | The list items. Add item, drag to reorder, Duplicate item and Delete item. |
| Layout | Vertical stacks the items; Inline puts them side by side, for example footer links. Options: Vertical, Inline. Default: Vertical. Per device. |
| Columns | Splits a vertical list into columns, filled top to bottom. Columns stay at least the Minimum column width (Design tab), so phones show one column unless you set one here. Options: 1, 2, 3, 4. Default: 1. Shown when Layout is not Inline. Per device. |
| Divider between items | Draws a line between the items. |
| Open links in a new tab | Opens every linked item in a new tab. |
Each item
| Setting | What it does |
|---|---|
| Text | Text of the item. Supports dynamic tags. |
| Icon | Icon of the item. Remove it for a plain text item. |
| Link | Makes the item a link. Supports dynamic tags. |
| Icon color | A color for this item’s icon only. |
Design tab
List
| Setting | What it does |
|---|---|
| Minimum column width | The narrowest a column may get before the list uses fewer columns. Shown when Columns is not 1. Per device. |
| Column gap | Space between the columns. Shown when Columns is not 1. Per device. |
| Space between | Space between the items. Per device. |
| Alignment | Aligns the items. Options: Left, Center, Right. Per device. |
| Divider › Style | Style of the divider line. Options: Solid, Dashed, Dotted. Shown when Divider between items is on. |
| Divider › Weight | Thickness of the divider line. Shown when Divider between items is on. |
| Divider › Length (vertical layout) | Length of the divider line in the vertical layout. Shown when Divider between items is on. Per device. |
| Divider › Height (inline layout) | Height of the divider line in the inline layout. Shown when Divider between items is on. Per device. |
| Divider › Color | Color of the divider line. Shown when Divider between items is on. |
Icon
| Setting | What it does |
|---|---|
| Normal › Color | Color of the icons. |
| Hover › Color | Color of the icons on hover. |
| Size | Size of the icons. Per device. |
| Text indent | Space between the icon and the text. Per device. |
| Vertical position | Keeps the icon on the first line of long items (Top) or centers it (Middle). |
| Stroke width | Line thickness of outline icons. |
Text
| Setting | What it does |
|---|---|
| Typography | Text style or font, size, weight and spacing of the item text. |
| Normal › Color | Color of the item text. |
| Hover › Color | Color of linked items on hover. |
| Hover › Underline links | Underlines linked items on hover. |
Shared Design sections
Every element also has these sections at the end of the Design tab.
| Section | What it does |
|---|---|
| Spacing & position | Margin, padding, width, alignment in its container, order, position (relative, absolute, fixed), offsets, z-index and global classes. See Spacing, size & position. |
| Background & border | Background, border, border radius, box shadow, overflow and opacity of the whole element. See Colors & backgrounds and Borders & shadows. |
| Mask | Crops the element to a shape (circle, arch, blob, star…) or your own SVG or PNG. See Shape dividers & masks. |
Behaviour tab
Behaviour sections
The Behaviour tab is the same for every element.
| Section | What it does |
|---|---|
| Anchor & classes | An Anchor ID for #links and your own CSS classes. |
| Animations | Entrance, scroll, hover and loop animations from presets or your own timeline. See Motion & effects. |
| Motion & effects | A simple entrance animation, transforms (also on hover), CSS and backdrop filters, and sticky positioning. |
| Scroll & mouse effects | Movement, rotation, scale, fade and blur while the page scrolls, and pointer effects (follow the pointer, 3D tilt). |
| Visibility | Hide the element on desktop, tablet or mobile, or in dark or light mode. See Visibility. |
| Conditions | Show the element only when rules match, such as logged-in visitors, a date range or a URL parameter. See Display conditions. |
| Interactions | Show, hide or change other elements when this one is clicked, hovered or scrolled into view. See Interactions. |
| Attributes | Custom HTML attributes for this element. See Anchor, classes & attributes. |
Tips
- Plain links. Remove an item's icon for a text-only link, for example in a footer menu.
- Columns on phones. Columns never get narrower than Design → List → Minimum column width, so a two-column list becomes one column on small screens by itself.
- Long items. Set Design → Icon → Vertical position to Top so the icon stays on the first line.
- Contact details. Link phone numbers with
tel:and email addresses withmailto:so visitors can tap them.