Container

Wrap content in special code blocks, use Container to apply Blacksmith stylesheets, and much more!

Examples

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.

1_captain pirate

The code is more what you'd call 'guidelines' than actual rules.

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!

Settings

Edit Mode

Edit Mode Title

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.

General

Container Type

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.

Act as Card Group Wrapper

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.

Tooltips & Popovers

Type

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.

Custom Container Sizing & Content Spacing

Enable Custom Height

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.

Height Units

Gives you the ability to choose from several different units of measure for the custom height of your Container's outer tag.

Enable Custom Width

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.

Width Units

Gives you the ability to choose from several different units of measure for the custom width of your Container's outer tag.

Display as CSS Grid

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.

Apply Gap to Grid Items

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.

Advanced

Role

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.

Set Position to Relative

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.

Include Data Tag

When enabled you can add your own custom data tag to the Container wrapper.

Include ARIA Label

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.

ARIA Hidden

Enabling this feature will hide this Container and its content from assistive screen readers.

HTML Comment

HTML Comment

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.

Custom

This field allows you to replace the default HTML Comment with your own text.

CSS & ID

Bootstrap CSS

Provides you the ability to add one of Boostrap v5's preset container CSS classes to your Container tool.

ID

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.

Classes

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.

More

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.