A list is an element component. Elements are contained within columns. This is the list component in the Right Pane - it looks like this:
Adding a List
Like all components in Landing Lion, you can add a list to any page variant or page template by dragging it from the Right Pane and dropping it inside a column on the Canvas. There is no limit to the number of lists you can add. By default, lists are set to be paragraph -
<p>. Your paragraph font size is set in your Page's Theme.
Selecting a List
To select a list, the Selection Tool must be set to "Auto" or "Element".
Editing a List
Edit a selected list in the Right Pane of the Page Editor:
- Full Width On Mobile - toggle this to dictate whether your list should occupy the entire width of its column or maintain the size set under "Width" - when its viewed on a mobile device. Switch your Viewing Mode to see what your list will look like on a mobile device.
- Width - adjust the width of a list. Width is either relative (a percentage), absolute (to the px), or auto. By default, it's set to be px. Click the "px" in the input field if you want to change it to "%" or "auto".
- List Items - the items to be displayed in a list. There is no limit to the number of items in a given list.
- Icon Width - dictates the width of a list's icon. By default, the list icon's width is set to 30 px.
- Alignment - by default, list icons are set to align with the center of the list item.
- Background - add as many backgrounds as you want. Backgrounds stack in the order in which you add them. You can change their order by dragging-and-dropping them.
- Padding - the amount of pixels each value equals is set in your Page's Theme under "Page Layout". Newly added lists do not have padding.
- Border - borders can be set by either px or %. You can choose which sides have borders and set a radius. You can pick one of the three types of borders: solid, dashed and dotted. Initially, it is set to solid.
- Drop Shadow - add as many drop shadows as you want - they stack in the order in which you add them. You can change their order by dragging-and-dropping them.
- Inner Shadow - add as many inner shadows as you want - they stack in the order in which you add them. You can change their order by dragging-and-dropping them.
Duplicating a List
Duplicate a selected list by clicking this duplicate icon in the Top Right Bar:
🦁 🔑 ⚠️ Lion Key Alert: use the keyboard shortcut to duplicate a list (or any component). Use ⌘D for Mac and Ctrl-D for PC.
Removing a List
Remove a selected list by pressing backspace or clicking this trash icon in the Top Right Bar: