Container

Base Foundry stack

Control the way your content is laid out and displayed within your Foundry pages. The Container stack is one of the core Foundry stacks, right up there with Margins and Columns.

  • 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.

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-Width
When Fixed-Width is chosen you’re given the opportunity to specify what you wish the maximum width of your Container stack to be.

Custom Units v2
When using the fixed-width settings you can choose the units you wish to use for your Max-Width value. You can choose from Pixels (px), View Width (vw), Percentage (%) or EMs (em).

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.

Insight
More than a wrapper

Only looking to group stacks together for Edit Mode in Stacks? Not using the other features of the Container stack? You want to be using the Group stack instead.

Container is meant for setting widths and adding some styling to the contained items. If you're not making use of those features why add the extra code to the page. Group was designed specifically for this task.