Description List Documentation
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