List Particle Documentation

  • Tony
  • 3 October 2018
  • No comments
  • Docs
Easily create nice looking lists, which come in different styles. See how List can be designed beautifully on Demo Page.

# List Package contents

The Uikit3 for Gantry 5 atom contains the compiled CSS and JavaScript files, twig and yaml files, which is everything you need to get started.
Files Description
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.


Settings Description
Items List items to show. You can add new items to the collection using the plus + icon
List Settings Common settings for List
Style Select the list style and add larger padding between items.
Larger padding Show list items with Larger padding.
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

Settings Description
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.

Style Tab

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


Leave a Reply

You must be logged in to post a comment.