Flip Card

Flip Card shows content on the front of a card and reveals more on the back. The card animates when a visitor hovers over it or moves focus to it with the keyboard. Choose an animation type and add a button on the back.

Content

Front Side

Open the module settings, go to the Content tab, and open the Front Side group.

Media Type: None, Icon (default), or Image.
Select Icon, or Upload Image with Image Alt Text.
Front Title, Front Sub Title, and Front Description.

Back Side

Media Type: None, Icon (default), or Image, with Select Icon or Upload Image and Image Alt Text.
Back Title, Back Sub Title, and Back Description.
Use Button: Off by default. Turn it on to show a button, then enter the Button Text.

Settings

Animation Type: Flip (default), Flip Diagonal, Flip Shake, Push, Slide, Fade, Zoom In, Zoom Out, Rotate 3D, or Open Up.
Animation Direction: Up, Right (default), Down, or Left for Flip, Slide, and Push. Right or Left for Flip Diagonal. Vertical or Horizontal for Rotate 3D.
Use 3d Animation: Off by default.
Animation Duration: Default 600ms.
Height: The height of the card. Default 300px.
Divider Flank Color: Default #dddddd.

Design

Go to the Design tab.

Front Side and Back Side

Content Alignment: Left, Center (default), or Right.
Content Vertical Alignment: Start, Center (default), or End.
Padding and Content Padding: Space inside the side and around its content. Padding defaults to 30px on each side.
Background for that side.

Front Media and Back Media

Position, Padding, Icon Color, Icon Size (default 60px), and the media Height and Width.

Front Title, Front Subtitle, Front Description, Back Title, Back Subtitle, and Back Description

Font settings for each text element. The subtitle and description groups also have a Spacing Top setting.

Button

Styling for the back side button, and Spacing Top (default 15px).

Border and Box Shadow

Standard border and box shadow settings for the card.