Information cards

This component allows you to add a section with cards that can include information, so you can feature things about your business in an appealing visualization.

The most notorious characteristic about this, is that each card can have information on its front and also on the back, which will be revealed once the user “hovers” on them.

Component settings

By clicking on the component name you will find general options to customize it, which will determine how the section will look and behave. The available options for this component are the following:

Columns

You will find two options to define the amount of columns in which cards will be displayed on desktop and mobile devices.

The way in which they arrange will depend also in what you choose at the Display option below.

Display

Allows to define if the component content will be displayed within a section of type Carousel or Grid.

You can read more about the differences between these two types on this page.

Carousel settings

This group of options will become visible when you choose Carousel, and they will allow you to customize its behavior.

You can find the full list of options on this page.

Heading options

By enabling this, a Heading section will be displayed before the component’s content. You can find the list of options on this page.

Cards options

This group of options will allow you to customize design aspects of the cards.

Space between

This option allows you to define if there will be space between the cards.

Note: it will only be visible and available to be used if what’s defined at the Spacing option in Theme settings > Design > Theme styles is any other than None.

Alignment

You will find two options to define the alignment of the cards content for desktop and mobile devices.

Border

Displays a border all around the cards. When enabled, Border opacity will become visible so you can define its opacity or transparency.

Card content colors

Allows to choose the Color Pack for all cards.

Icons options

When Show icons is enabled in the previous group, this new one will appear so you can define the Size and Shape of the icons.

Appearance

This group contains the following options to customize the component:

• Top margin: allows to control the upper margin of the section.
• Bottom margin: allows to control the lower margin of the section.
• Content colors: allows to choose the Color Pack for the component. This will affect the color of the titles if Overlap titles is disabled.

Animations

The Customize options allows to adjust the animations for this specific component. You can read which ones are available on this page.

---

---

Subcomponent settings

The subcomponent of the Information cards is called Information card, or just Card as we will refer to it. On each one of them you will find the following options to define their content:

Icon

Here you can choose the icon of each card. This will be visible as long as Show icons is enabled at the main component settings.

Title

Title for the card, which will be the same for both the front and back.

Texts

You will find two fields to define the front and back texts on each card.

Link

Here you can add a link on each card, on which additional options will be displayed once you do so:

• Link text: Text that will be displayed within the button.
• External link: If enabled, the link will open in a new browser tab.
• Link as button: if enabled, a button will be displayed along with the banner content. The following options will also be displayed if this enabled:
  • Outline style: allows for the button to have a border around it and a transparent background.
  • Arrow in button: displays an arrow icon on the right side of the button text.