Flip
Create two-sided stacks, with your content on both sides, that can be flipped over by your visitors. Flip can help to organize content in a stylish, fun way.
- Build two-sided stacks that flip to reveal more content.
- Adjust styling for front and back of stack separately.
- Change animation direction to one of four different options.
Example
Using Flip
General
Remove Base Margin
This setting lets you disable the preset standard spacing that is applied to the bottom of the stack.
Round Corners
Set how round you wish to have the Flip stack’s corners. You can set the corner roundness uniformly or choose to set each corner to its own individual border radius value.
Front
Style
Allows you to set the background style for the front side of the Flip stack. You can choose to use on of the Foundry preset styles or opt to use a custom color picker, gradient or image. If you choose a solid color or gradient you’ll be presented with the appropriate color pickers. Selecting an image as your background will provide you an image drop zone for your image.
Border Width
Allows you to set a border for this side of the Flip stack. You can also choose a custom color for the border as well.
Padding
You can opt to have a uniform padding applied to this side of the Flip stack’s content. You’re able to specify a padding value at each of the three breakpoints.
Drop Shadow
Enabling this feature adds a drop shadow to the stack when the front of the stack is being viewed. When turned on this setting gives you the ability to customize the size of the shadow, its horizontal and vertical offset as well as its color.
Front Toggle
Width & Height
Allows you to select a separate width and height for the toggle which flips the stack over to the other side.
Alignment
You’re able to place the toggle in nine different locations using a set of alignment controls -- one control allows you to align the toggle to the left, center or right, while the other lets you adjust the vertical alignment, setting it to top, middle or bottom.
Depending on your choices you’ll also be given controls for adjusting the toggle’s offset values.
Toggle Type
You may choose to use either an icon, chosen from a list of icons, or your own custom text for your toggle button.
Size
This control allows you to adjust the text / icon size within the toggle.
Toggle Background & Toggle Icon
Two pairs of color pickers that allow you to adjust the background and icon colors for your toggle. You can set colors for its normal state as well as adjust the colors that will be seen when the visitor hovers over the toggle button as well.
Drop Shadow
Enabling this feature adds a drop shadow to your toggle button. You can adjust its shadow size, horizontal and vertical offset as well as its color.
Round Corners
Set how round you wish the front toggle’s corners to be. You can set the corner roundness uniformly or choose to set each corner to its own individual border radius value.
Back
Style
Allows you to set the background style for the back side of the Flip stack. You can choose to use on of the Foundry preset styles or opt to use a custom color picker, gradient or image. If you choose a solid color or gradient you’ll be presented with the appropriate color pickers. Selecting an image as your background will provide you an image drop zone for your image.
Border Width
Allows you to set a border for this side of the Flip stack. You can also choose a custom color for the border as well.
Padding
You can opt to have a uniform padding applied to this side of the Flip stack’s content. You’re able to specify a padding value at each of the three breakpoints.
Drop Shadow
Enabling this feature adds a drop shadow to the stack when the front of the stack is being viewed. When turned on this setting gives you the ability to customize the size of the shadow, its horizontal and vertical offset as well as its color.
Back Toggle
Width & Height
Allows you to select a separate width and height for the toggle which flips the stack over to the other side.
Alignment
You’re able to place the toggle in nine different locations using a set of alignment controls -- one control allows you to align the toggle to the left, center or right, while the other lets you adjust the vertical alignment, setting it to top, middle or bottom.
Depending on your choices you’ll also be given controls for adjusting the toggle’s offset values.
Toggle Type
You may choose to use either an icon, chosen from a list of icons, or your own custom text for your toggle button.
Size
This control allows you to adjust the text / icon size within the toggle.
Toggle Background & Toggle Icon
Two pairs of color pickers that allow you to adjust the background and icon colors for your toggle. You can set colors for its normal state as well as adjust the colors that will be seen when the visitor hovers over the toggle button as well.
Drop Shadow
Enabling this feature adds a drop shadow to your toggle button. You can adjust its shadow size, horizontal and vertical offset as well as its color.
Round Corners
Set how round you wish the back toggle’s corners to be. You can set the corner roundness uniformly or choose to set each corner to its own individual border radius value.
Animation
Type
Allows you to change how the Flip stack animates. You can choose from four different animation styles.