A Flip Card shows one set of content on a page of your site until a visitor hovers over it with a mouse, at which point it then “flips” to show a second set of content. It’s similar to other components that have a hover state, except in this case you’re hovering between different components.
To get started, click on Add Content at the top of the website editor, then drag the Flip Card component to a page of your site. Next, click on the component to open the options panel.
Adding Content to the Component
To add content to the front and back of the card, click on the Add Content buttons found under the Front Content or Back Content headers. To make it easier to edit the content you add to the front and back, click on the Lock Face dropdown and choose either front or back. This stops the component from flipping when you mouse over it so you can edit the components you add.
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. Note that this height applies to both the front and back of the component.
- 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.
- Shape - By default this option 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.
Card Front
The options in this group control styling choices for the content in the front 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 Card
The options in this group control styling choices for the content in the back of the card.
- 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. You can set the width, style, and color of the border.
- 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.
Spacing
The Margin option found in this section controls the spacing around the card within the component. This applies to both the front and back of the card, and can also be set separately for different screen sizes.