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

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
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

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

Comments

Leave a Reply

You must be logged in to post a comment.