Create versatile, unique partitioned layouts for your page design. The documentation pages for this site are built using the Partitions tool!
The Paritions tool is used for our Documentation pages already. It is how we've built this nice 3-pane layout with our main navigation at the top, and our documentation pages index on the left of the main content.
Separarte panes of content can often make content heavy pages easier for the visitor to handle, and easier for you as the designer to organize.
Partitions makes it easy to build these grid-based, golden layouts so you can spend more time with your content.
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.
By default Partitions will always have a main content area as well as a sidebar. Here you can opt to also include a topper and / or footer section as well.
Allows you to adjust the gutters between the various partitioned sections. This is set to 0 (zero) by default.
Here you can choose from one of Foundry's padding presets for your content area of the Partitions tool. If you need something more than the presets offer, simply set this to None and use a Spacing tool inside the content area instead.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of the main content area. You're also provided an option to choose a custom one-off color as well or transparent, which allows a parent container or the page background to show through.
Enabling this feature adds a border to the main content area.
Choose which sides of the content area you'd like to apply to. You can opt to apply it to all sides, or any combination of them.
Allows you to choose from one of the preset border widths for ease of use, or opt to provide your own custom border width value.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the border of the main content area. You're also provided an option to choose a custom one-off color as well.
Allows you to specify an options class, or classes, that will be added to the main content area of the Partitions tool. 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.
Here you can choose which side of the page you'd like the sidebar section of the Partitions layout to appear on.
Here you can choose from one of Foundry's padding presets for your sidebar area of the Partitions tool. If you need something more than the presets offer, simply set this to None and use a Spacing tool inside the sidebar instead to create custom padding.
Here you'll set the width of the sidebar itself. By default this width will be applied to the Medium through Extra Extra Large breakpoints uniformly. There is a separate setting below for configuring the mobile (Extra Small and Small) breakpoints.
If you click on the small + icon above the Sidebar Width setting you can then set individual, non-uniform widths for each of the Medium through Extra Extra Large breakpoints.
Allows you to choose the unit of measure for the Sidebar Width setting, above.
Here you'll set the width of the sidebar for smaller displays and brwoser widths. The sidebar is hidden off screen, much like in the Off-Canvas tool, and is triggered by the visitor clicking ot tapping on a small icon trigger.
Allows you to choose the unit of measure for the Mobile Width setting, above.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of the sidebar section. You're also provided an option to choose a custom one-off color as well or transparent, which allows a parent container or the page background to show through.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of the sidebar section. You're also provided an option to choose a custom one-off color.
When enabled a background overlay will be applied between the Mobile Sidebar slideout and the background of the page that it sits on top of.
Used to add a decorative shadow to the sidebar. Foundry provides a variety of preset shadow styles, as well as access to a user defined preset that you can configure in the Control Center. Additionally for one-off shadows there is also a custom shadow option where you can create a unique shadow style, setting its positioning, size, spread and color.
Enabling this feature adds a border to the sidebar section.
Choose which sides of the content area you'd like to apply to. You can opt to apply it to all sides, or any combination of them.
Allows you to choose from one of the preset border widths for ease of use, or opt to provide your own custom border width value.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the border of the sidebar. You're also provided an option to choose a custom one-off color as well.
Here we can adjust the vertical alignment of content within the sidebar section.
Allows you to specify an options class, or classes, that will be added to the sidebar of the Partitions tool. 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.
When enabled the topper section will adjust its height to match the content placed within it. If you choose to disable the auto height feature you'll be given a field to enter a fixed height, as well as a selctor to choose the units of measure for that fixed height.
Here you can choose from one of Foundry's padding presets for your topper area of the Partitions tool. If you need something more than the presets offer, simply set this to None and use a Spacing tool inside the sidebar instead to create custom padding.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of the topper area. You're also provided an option to choose a custom one-off color as well or transparent, which allows a parent container or the page background to show through.
Enabling this feature adds a border to the topper section.
Choose which sides of the topper you'd like to apply to. You can opt to apply it to all sides, or any combination of them.
Allows you to choose from one of the preset border widths for ease of use, or opt to provide your own custom border width value.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the border of the sidebar. You're also provided an option to choose a custom one-off color as well.
Allows you to specify an options class, or classes, that will be added to the topper section of the Partitions tool. 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.
When enabled the footer section will adjust its height to match the content placed within it. If you choose to disable the auto height feature you'll be given a field to enter a fixed height, as well as a selctor to choose the units of measure for that fixed height.
Here you can choose from one of Foundry's padding presets for your footer area of the Partitions tool. If you need something more than the presets offer, simply set this to None and use a Spacing tool inside the sidebar instead to create custom padding.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of the footer area. You're also provided an option to choose a custom one-off color as well or transparent, which allows a parent container or the page background to show through.
Enabling this feature adds a border to the footer section.
Choose which sides of the footer you'd like to apply to. You can opt to apply it to all sides, or any combination of them.
Allows you to choose from one of the preset border widths for ease of use, or opt to provide your own custom border width value.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the border of the sidebar. You're also provided an option to choose a custom one-off color as well.
Allows you to specify an options class, or classes, that will be added to the footer section of the Partitions tool. 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.
Here you'll choose where on the page the fixed positioned mobile sidebar toggle will be placed. You can choose the top or bottom of the page as well as the left or right.
This setting allows you to offset the toggle from the edge of the browser. You can adjust both the vertical and horizontal offset distances independent of one another.
Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the background of the mobile sidebar toggle. You're also provided an option to choose a custom one-off color as well.
This color picker is used to customize the color of the icon included in the mobile sidebar toggle button.
Outline Mode can be used when working with the Preset styling mode. This basically inverses the colors and uses a tranparent background color. This is yet another way to provide variety in your page and button designs.
We provide a quick way to add a subtle light gradient over our buttons when using Preset or Custom Styling modes. This simply includes a translucent white gradient over the button to give it a bit more depth.
When using Preset mode for your Button's style we can set the opacity of the button when the visitor hover over it. When using other modes like Custom Styling and gradients you can set separate hover styling instead of using the Opacity hover feature.
Used to add a decorative shadow to the button. Foundry provides a variety of preset shadow styles, as well as access to a user defined preset that you can configure in the Control Center. Additionally for one-off shadows there is also a custom shadow option where you can create a unique shadow style, setting its positioning, size, spread and color.
Allows you to adjust the layering of elements using a custom z-index value. Here you can set the z-index for the mobile sidebar toggle.
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.
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.