The Flip Card Grid component displays multiple Flip Card components in a grid manner similar to the Grid component. Each card in the grid shows one set of content until a visitor hovers over it with a mouse, at which point it then “flips” to show a second set of content.
To get started, click on Add Content at the top of the website editor, then drag the Flip Card Grid component to the page. Next, click on the component to open the options panel.
Managing Cards
To add cards to the component, click the Add button found underneath the Card heading. You may also want to change the Lock Face option to front or back. This prevents the cards in the component from flipping so it’s easier to add and see the content you’ve added. This setting applies to all cards added.
To edit individual cards, click on a card in the list of cards and you’ll see the following options:
- Front Content - Click on the Add Content button to add components. Once added, you can edit the components by clicking on them individually.
- Back Content - Similar to Front Content, click on Add Content to add content to the back of the card.
- Front Content Align - Use this option to vertically align content to the top, middle, or bottom of the component.
- Front Gap - With this option you can control the spacing between components on the front of the card. This can be set separately for different screen sizes.
- Front Text Color - Use this option to set color for text. By default it uses your site settings.
- Front Background - With this option you can add a custom background to the front of the card, such as a color, gradient, image, or image with overlay.
- Front Border - Use this option to add a border around all of the content added to the front of the card. You can set the width, style, and color of the border
- Front Padding - With this option you can control the space between the border and any content added to the front of the card. This can be set separately for different screen sizes.
- Back Content Align - Use this option to vertically align content to the top, middle, or bottom of the component.
- Back Gap - With this option you can control the spacing between components on the back of the card. This can be set separately for different screen sizes.
- Back Text Color - Use this option to set color for text. By default it uses your site settings.
- Back Background - With this option you can add a custom background to the back of the card, such as a color, gradient, image, or image with overlay.
- Back Border - Use this option to add a border around all of the content added to the back of the card.
- Back Padding - With this option you can control the space between the border and any content added to the back of the card. This can be set separately for different screen sizes.
To delete a card, click on the red X on the top left corner of a card in the list. To change the order of cards, click on the three vertical dots and drag a card to a new position in the list.
Size & Position
The options found within this option group control the overall sizing and positioning of the component.
- Height - This option is a number and sets the fixed height of the component. As you add more cards you may need to increase this.
- Width - This option is a proportion of the component width. By default, it’s set to full, but you can set this to a smaller proportion. You can also set this separately for different screen sizes by clicking the desktop/mobile icon.
- Align - If you choose a width other than *full, you can use this option to align your card to the left, right, or center of the component.
Layout
The options within this group control the layout of the component. Both options can be set separately for different screen sizes by clicking their respective desktop/mobile icons.
- Columns - This option controls the number of columns in the grid. You can set this from as little as 1 to as many as 12.
- Gap - With this option you can set how much space there is between individual cards within the component.
Design
By default the Shape option found in the Design option group inherits the shape setting of your site, however you can choose a different option to override that. This can also be set separately for different screen sizes.
Spacing
The Margin option found in this section controls the spacing around the card within the component, and can also be set separately for different screen sizes.