FAQ Particle Documentation

Add an easy-to-create, stylish FAQ section to your website. Display your frequently asked questions in your sites easily without any kind of coding. See how FAQ can be designed beautifully on Demo Page.

# FAQ Package contents

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

Settings

Items You can add new items to the collection using the plus + icon

Settings	Description
Title	Customize the Title.
Content	Customize the content.
Image	An image field with an image picker.
Image ALT	Enter the image’s alt attribute.
Link	Specify the button link.
Link Text	Specify the button label.
Tags	Enter a comma-separated list of tags, for example: blue, white, black.

Filter Common settings for Filter

Settings	Description
Filter Style	Select the filter navigation style. The pill and divider styles are only available for horizontal Subnavs.
Reverse order	Enable tags reverse order.
ALL Label	Replace the All label tag
Position	Position the filter navigation at the top, left or right. A larger style can be applied to left and right navigations.
Primary navigation	The Primary navigation is not available for tab filter style and top filter position.
Animation	Select an animation that will be applied to the content items when toggling between them.
Alignment	Align the filter controls. The Alignment styles are only available for TOP filter position.
Margin	Set the vertical margin.
Grid Width	Define the width of the filter navigation. Choose between percent and fixed widths or expand columns to the width of their content.
Grid Column Gap	Set the size of the gap between between the filter navigation and the content.
Grid Breakpoint	Set the breakpoint from which the filter navigation and grid will stack.

Behavior Common settings for Behavior

Settings	Description
Allow multiple open items	Allow multiple open items on click.
Allow all items to be closed	Allow all items to be closed on click.
Show Tooltip	Use this option to show tags tooltip info.
Tooltip Position	Choose one of these options to adjust the tooltip’s alignment.
CSS Classes	CSS class name for the particle.

Tab Style

Settings	Description
Title Style Settings	Common settings for Title Style
Predefined Color	Select a predefined text color.
Custom Color	Customize the title color instead using predefined title color mode. You need to set the predefined color to None to use the customize color option.
Font Size	Customize the title text font size.
Transform	The following options will transform text into uppercased, capitalized or lowercased characters.
Content Style Settings	Common settings for Content Style
Style	Select a predefined text style, including color, size and font-family.
Predefined Color	Select the predefined meta color.
Content Color	Customize the content color instead using predefined text color. You need to set the predefined color to None to use the customize color option.
Font Size	Customize the content text font size.
Transform	The following options will transform text into uppercased, capitalized or lowercased characters.
Margin Top	Set the top margin.
Link Style Settings	Common settings for Link Style
Target	Target browser window when item is clicked.
Style	Set the button style.
Button Size	Set the button size.
Margin Top	Set the top margin.

General, Parallax and Parallax Background tab

Please take a look the documentation here for more detail about these tabs settings

Introduction
Settings