Description List Documentation

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

# Description List Package contents

Files Description
jldescription.yaml Contains the Description particle settings.
jldescription.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 Description 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 Description List particle (i.e: Home) -> Layout tab -> Drag and drop the Description List Particle from Particles panel (left corner) to the section you want to display the Description List.

Content Settings

Settings Description
Items List Description items. You can add new items to the collection using the plus + icon
List Settings Common settings for description list
Style Select the list style and add larger padding between items.
Larger padding show large padding for items
Layout Define the layout of the title, meta and content. (Support 03 layout types)
CSS Classes CSS class name for the particle.

Items Click Items field to enable it, then you can add new items to the collection using the plus + icon

Settings Description
Title Customize the Title.
Meta Customize the Meta.
Description Customize the description.
Link Specify the link.
Note: Scroll smoothly added automatically to internal link that contains a URL fragment to add the smooth scrolling behavior.
Target Open the link in a same or new window.

Style Tab

Below is the screenshot that shows how to customize the Layout title and color color customization for Description List.

Settings Description
Title Style Settings Common settings for Title Style
Style Select the title style and add an optional colon at the end of the title.
Add A Colon Add A Colon (:) for title.
Grid Width Define the width of the title within the grid. This option won’t have any effect if the Layout assign to Stacked mode.
Add A Leader This option won’t have any effect unless Layout assigned to 2 Column Grid (Meta only) and Width assigned to Expand.
Column Gap Set the size of the gap between the grid columns.
Row Gap Set the size of the gap between the grid rows.
Grid Breakpoint Set the breakpoint from which grid items will stack.
Predefined Color Select the predefined Uikit text color. If the Background option is selected, styles that don’t apply a background image use the primary color instead.
Custom Color Customize the title color instead using predefined title color mode.
You need to set the Predefined color to None before using the color customization.
Font Size Customize the title text font size.
Transform The following options will transform text into uppercased, capitalized or lowercased characters.
Meta Style Settings Common settings for Meta Style
Style Select a predefined meta text style, including color, size and font-family.
Predefined Color Select the predefined meta color.
Custom Color Customize the meta color.
You need to set the predefined color to None before using the color customization.
Font Size Customize the meta text font size.
Transform The following options will transform text into uppercased, capitalized or lowercased characters.
Alignment Align the meta text above or below the title. This option won’t have any effect IF the Layout assign to 2 Column Grid (Meta only) mode.
Content Style Settings Common settings for Content Style
Style Select a predefined meta text style, including color, size and font-family.
Predefined Color Select the text color. If the Background option is selected, styles that don’t apply a background image use the primary color instead.
Custom Color Customize the content color instead using predefined text color.
You need to set the predefined color to None before using the color customization.
Font Size Customize the content text font size.
Transform The following options will transform text into uppercased, capitalized or lowercased characters.
Link Style Settings Common settings for Link Style
Style This option doesn’t apply unless a URL has been added to the item. Only the item’s content will be linked.

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.