List Particle Documentation
Easily create nice looking lists, which come in different styles. See how List can be designed beautifully on Demo Page.
|jllist.yaml||Contains the List particle settings.|
|jllist.html.twig||The Twig file to pull information, settings.|
Installation Installing the particle on your website is a really simple process. You can refer to the document here to know more.
Requirements List requires Uikit 3 for Gantry 5 Atom to be installed and enabled in your theme layout settings.
Go to Template/Theme Settings > select the Layout to add List particle (i.e: Home) -> Layout tab -> Drag and drop the List Particle from Particles panel (left corner) to the section you want to display the List.
|Items||List items to show. You can add new items to the collection using the plus + icon|
|List Settings||Common settings for List|
|Marker||Select the marker of the list items.|
|Marker Color||Select the color of the list markers. This option doesn’t apply if Image Bullet is selected.|
|Size||Define the padding between items.|
|Style||Select the list style.|
|Columns||Set the number of list columns.|
|Show dividers||Show a divider between list columns.|
|Columns Breakpoint||Set the device width from which the list columns should apply.|
|HTML Element||Choose between an ordered and unordered list to fit your semantic structure.|
|CSS Classes||CSS class name for the particle.|
|CSS ID||Enter the ID for the particle without the hash (#) (ie. your-id). You can then reference the element via CSS as #your-id|
Items Click Items field to enable it, then you can add new items to the collection using the plus + icon
|Description||Enter short description|
|Image||An image field with an image picker.|
|Image ALT||Enter the image’s alt attribute.|
|Icon||Instead of using a custom image, you can click on the hand to pick an icon from the icon library.|
|Icon Color||Set the icon color.|
|Link||Specify the item link.|
|Target||Target browser window when item is clicked.|
Below is the screenshot that shows how to customize the color for List.
General, Parallax and Parallax Background tab
Please take a look the documentation here for more detail about these tabs settings