Card Particle Documentation

  • Tony
  • 3 October 2018
  • No comments
  • Docs
Display text with an image optionally styled like a card. See how Card can be designed beautifully on Demo Page.

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

Settings

Tab Content

Settings Description
Title. Customize the title.
Meta Customize the meta.
Content Customize the content.
Image An image field with an image picker.
Image ALT Enter the image’s alt attribute.
Button label Specify the button label.
Button Link Specify the link for heading.
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.
Button Style Set the button style.
Card Settings Common style settings for Card
Card Style Select one of the boxed card styles or a blank panel.
Size Define the card’s size by selecting the padding between the card and its content.
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

Style Tab

Title Settings Common settings for Title Style

Settings Description
Style Heading styles differ in font-size but may also come with a predefined color, size and font.
Link title Link the title if a link exists.
Hover Style Set the hover style for a linked title. Enable link title to use this option.
Decoration Decorate the headline with a divider, bullet or a line that is vertically centered to the heading.
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 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.
HTML Element Choose one of the elements to fit your semantic structure.
Margin Top Set the top margin.

Meta Settings Common settings for Meta Style

Settings Description
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. Set Predefined Color for Meta to None before using this feature.
Font Size Customize the title text font size.
Transform The following options will transform text into uppercased, capitalized or lowercased characters.
Alignment Align the meta text above/below the title or below the content.
Margin Top Set the top margin.

Content Settings Common settings for Content Style

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

Image Settings Common settings for Image Style, including Conditional Fields.

Settings Description
Align image without padding Top, left or right aligned images can be attached to the card’s edge. If the image is aligned to the left or right, it will also extend to cover the whole space.
This option won’t have any effect IF the Card Style is set to None or Image Alignment is set to Between.
Width Enter the image’s width.
Height Enter the image’s height.
Image Border Select the image’s border style.
This option won’t have any effect if Align image without padding is enabled.
Box Shadow Select the image’s box shadow size.
This option won’t have any effect unless the Card Style is set to None.
Hover Box Shadow Select the image’s box shadow size on hover.
This option won’t have any effect unless the Card Style is set to None.
Link image Link the image if a link exists.
Hover Transition Set the hover transition for a linked image.
Link image Link the image if a link exists.
Image Alignment Align the image to the top,left, right or place it between the title and the content.
Grid Width Define the width of the image within the grid. Choose between percent and fixed widths or expand columns to the width of their content.
This option won’t have any effect unless Image Alignment is set to Left or Right.
Grid Column Gap Set the size of the gap between the image and the content.
This option won’t have any effect unless Image Alignment is set to Left or Right.
Grid Row Gap Set the size of the gap if the grid items stack.
This option won’t have any effect unless Image Alignment is set to Left or Right.
Grid Breakpoint Set the breakpoint from which grid cells will stack.
This option won’t have any effect unless Image Alignment is set to Left or Right.
Vertical Alignment Vertically center grid cells.
This option won’t have any effect unless Image Alignment is set to Left or Right.
Margin Top Set the top margin.
This option won’t have any effect unless Image Alignment is set to Bottom or Between.

Link Settings Common settings for Link Style

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

Video Overview

Comments

Leave a Reply

You must be logged in to post a comment.