Features

  • Select either a fixed-width or flexible layout
  • Set your max-width per Container stack
  • Add a drop shadow
  • Use rounded or squared off corners

Example

There are no examples for the Container stack. Since it is used to control the layout of other content there is not a good way to provide an example. On this page our main content area has been placed in a Container stack using the Fixed-Width setting.


Using Container

General

Type
Choose which type of Container you’d like it to be. You can choose from a Fixed-Width or Fluid container.

  • Fixed-Width: Allows you to set a maximum width for your container. At the smaller breakpoints the Container stack automatically adjusts becoming a Fluid container to best fit mobile devices.
  • Fluid: The Container remains flexible at all breakpoints, filling out the entire width of any space it is placed within.

Max-Wdith
When Fixed-Width is chosen you’re given the opportunity to specify what you wish the maximum width of your Container stack to be.

Styling

Drop Shadow
Allows you to enable a drop shadow that is applied to the inner portion of the Container stack, which houses your Container stack’s content

Blur
This slider allows you to adjust the size of your drop shadow, when it is enabled.

Shadow Color
Adjust the color of your bro shadow on your Container stack. You can choose to also adjust the opacity of the shadow’s color as well using the built-in color picker.

Round Corners
Used to set how much you’d like to round the corners of the inner content area of your Container stack. You can have all four corners of the container’s corners match, or set them individually.

  • Please Note: Using rounded corners will hide any content that would possibly overflow the bounds of your Container's inner content area.

Advanced

Edge-to-edge Container
The Container stack sits within a row in Foundry. This row has a small amount of padding on either side of it to make sure it looks great even on small mobile devices and the content doesn’t abut the border of those devices. You can disable this small, extra bit of padding using this feature.

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-2016 Elixir Graphics | Contact Us