In order to best showcase what the Overlap stack can do we’ve built a separate example page. Check out the example page to see how you can make use of the Overlap stack in your projects.
Choose which type of inner area you’d like to have in the Overlap stack. You can choose from a Fixed-Width or Fluid container.
When Fixed-Width is chosen you’re given the opportunity to specify what you wish the maximum width of the Overlap stack’s inner content area to be.
You are able to choose how Overlap handles the top and bottom distance adjustments. When an element is moved upwards with Overlap it leaves a space below that element that is equal to the amount it was moved upward.
You can choose to use the Unified method, where the stack applies a negative margin to the bottom of the element that is equal to the distance you moved it upwards. This eliminates the bottom gap. Or you can opt to set different values for the top and bottom distances. This is more advanced. Most users will only need and use the Unified option.
Set the distance that the Overlap stack will move upwards, overlapping the content on the page above it. You can set a different distance for each of the three breakpoints.
Allows you to set the distance that the Overlap stack will move upwards, was well as setting a different distance for below the Overlap stack. It too can be adjusted at each of the three breakpoints. The non-unified setting is less likely to be used in most layouts.
Set the background color for the inner content area of the Overlap stack. You can set a different background color for each of the 3 breakpoints.
You are able to round the corners of the inner content area, setting different border radii at each of the breakpoints.
Enable to add a drop shadow to the inner content area of the Overlap stack. You’re also able to have the drop shadow be disabled at the Mobile breakpoint.
Set the distance you wish for the shadow to go in the vertical direction. You are able to set a different distance for this offset at each of the breakpoints. You can use either positive or negative numbers for the offset values.
Set the distance you wish for the shadow to go in the horizontal direction. You are able to set a different distance for this offset at each of the breakpoints. You can use either positive or negative numbers for the offset values.
Use this setting to adjust the size of the drop shadow at each of the three breakpoints.
You are able to adjust the color of your drop shadow to match your site’s styling. You can also use the opacity slider to adjust the shadow’s density.
Set the width of the inner content area’s border for each of the three breakpoints.
Choose what color you wish your border to be using a color picker to help match it to the style of the rest of your site.
Choose a custom Z-Index value for your overlapped content. This is for more advanced layering of content.
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