Features

  • 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

Header

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Header

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.


Image

Header

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.


Flip

Header

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper.

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Close

Header

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend.


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.

Sign up for The Forge newsletter

Stay up to date on future versions of Foundry, as well as important news, updates and more!

This site is built using Foundry for RapidWeaver

© 2006-2018 Elixir Graphics | Contact Us