The Container tool is used as a utility with other elements on the page and thus doesn't have something that would be appropriate as a visual example here.
Previously Container was a single purpose tool that allowed you to set a maximum width for your content.
With the addition of a Max-Width tool in the latest version of Foundry we've repurposed Container to help with more advanced tasks.
It can be used for wrapping content in special code containers, providing an element to apply Blacksmith stylesheets to, and so much more!
Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.
Here you can customize the Container's code wrapper tag. This allows you to semantically markup your page's content if need be.
In addtion to the list of semantic tags you also have the ability to supply your own using the Custom option. This setting defaults to the standard div
tag.
This feature is specific to the Card tool. Placing multiple Cards, and only Cards, within the Container and activating this feature will join the Cards into one element. This feature replaces the need for the old Foundry v2 Card Deck tool.
Here we can choose between having a simple Tooltip or a more advanced Popover added to the Container. These elements appear when the visitor hovers over the Container. By default we have the Type set to None, which turns off this feature.
Be sure that you've enabled Tooltips and Popovers in the Control Center's "Additional Elements" section. Doing this loads the appropriate javascript for these items. Not loading this javascript by default saves us from loading code on the page that we may not need.
When enabled this setting applies a height to the Container's outer tag. This allows you to set a specific size for this element.
You're given the ability to adjust the height uniformly, applying your custom height to the Container at all breakpoints, or by clicking the small + icon you can adjust the height at each of the 6 responsive breakpoints independently.
Gives you the ability to choose from several different units of measure for the custom height of your Container's outer tag.
When enabled this setting applies a width to the Container's outer tag. This allows you to set a specific size for this element.
You're given the ability to adjust the width uniformly, applying your custom width to the Container at all breakpoints, or by clicking the small + icon you can adjust the width at each of the 6 responsive breakpoints independently.
Gives you the ability to choose from several different units of measure for the custom width of your Container's outer tag.
This setting allows you to quickly set the display style for the Container to grid
. This means you can then use the advanced Align and Justify Content settings to create unique layouts.
Be sure to watch the tutorial video for Container to learn more about these settings.
Allows you to apply preset gap spacing to items when using the Display as CSS Grid feature. Helps to easily add space between these inline items.
Generally the role attribute describes the role of an element for programs that can make use of it, such as screen readers or magnifiers. We provide a list of the more commonly used roles, but also provide a Custom otion where you can provide your own. By default this setting is disabled by being set to None.
Allows you to add the CSS Position attribute to the Container and set it to Relative. This shortcut can help when positioning other elements within the Container using Absolute positioning.
When enabled you can add your own custom data
tag to the Container wrapper.
Enable this feature to add an ARIA Label of your own to this Container. The purpose of an ARIA Label is to provide a label for elements so that they can be read by assistive technology iespecially if they would not be clear to a visitor what they might be used for without being able to see them.
Enabling this feature will hide this Container and its content from assistive screen readers.
Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.
This field allows you to replace the default HTML Comment with your own text.
Provides you the ability to add one of Boostrap v5's preset container CSS classes to your Container tool.
Lets you assign a custom CSS ID to the Container. Remember that you can only assign one ID to a container and it can only be assigned once per page.
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.
Additionally Container has a quick, convenient way to add some of Foundry's most often used tools to its contents by clicking the small + at the bottom of the Container tool in Edit Mode.