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 decide which edge of the browser you'd like the Off-Canvas tool to appear from when toggled by the visitor. You can choose from Top, Bottom, Left or Right. This defaults to the left-hand side of the browser.

Depending on the location you choose you're then able to adjust the height or width of the Off-Canvas content area.

When enabled the Off-Canvas tool will start out open when the page loads. This is off by default, meaning the content won't be seen until the visitor triggers the Off Canvas item.

Enabling this feature will add a background overlay between the Off-Canvas item and the page.

Allows the page content to continue to scroll even when the Off-Canvas tool has been triggered and is visible.

By default a header label is added to the top of the Off-Canvas content. This allows you to label the contents below it. You can use this feature to disable and hide this header.

This is where you'll enter the label text for your header at the top of the Off-Canvas content area.

This setting provides you with several preset font sizes for the included header. If you want more control over the header you can disable this in-built header and add a Header tool within Off-Canvas' content manually.

When enabled the header label is bolded to help it standout.

By default Off-Canvas includes a button within the header section. This feature allows you to disable this closer button.

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 header background. You're also provided an option to choose a custom one-off color as well.

Provides a color picker for customizing the text within the Off-Canvas header.

Allows you to chooose whether the close button, when enabled, should be light or dark. Use this feature to choose a style that fits your header background best.

Choose from several preset padding options for the Off-Canvas header area.

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 main content background. You're also provided an option to choose a custom one-off color as well.

Choose from several preset padding options for the Off-Canvas main content area.

Used to add a decorative shadow to this tool. 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 hide the trigger button. This can often be helpful when having the Off-Canvas item start open on page load.

Here you can add text to the button label that will trigger the Off-Canvas tool. If you wish to have just an Icon in the button enable the Icon feature and delete the text within this label field.

When enabled you can add an ARIA label for accessibility to your button.

When enabled a preset margin will be added to the base of the tool. Foundry allows you to configure the Base Margin preset to your liking within the Control Center. The Base Margin can be configured independently at each of the 6 responsive breakpoints.

When enabled your button will be positionedin a fixed spot within the browser window instead of normal, inline positioning. This allows your button to always be visible. This can be handy for slide out navigation layouts.

When fixed positioning is enabled you're able to use these toggles to place the button in specific areas of the browser window.

Here you can adjust the button's distance from the edge of the browser window. You can adjust both the horizontal and vertical offset.

Allows you to adjust the layering of elements using a custom z-index value.

Here we can define the font for this tool. You can choose to use one of the fonts defined in the Typeface stack or simply use the Base Font that is defined in the Foundry Control Center.

Allows you to adjust the font weight for your text. This setting goes from 100 to 900 in increments of 100. Standard Normal font weight is 400 and Bold font weight is generally 700.

The Button tool offers several different style modes to choose from. Below we look at each of the style modes and what they have to offer:

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.

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.

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.

Here you can adjust the size of the button using the 3 preset choices. You can opt for a small, standard or large button, with the default being Standard.

Foundry provides 5 different presets for rounded corners. These can be found throughout Foundry's various tools. You're also able to remove the roundness of the corners by setting this to none, or provide your own custom value for the border radius, or rounded corners. When using Custom mode you can set a different value on each of the four corners.

When you want to have a button take up the full-wdith of its parent container you can use the block button feature. This setting can be toggled on or off at each of the 6 responsive breakpoints. This is handy for setting a block button for mobile at the Small and Extra Small breakpoints.

This setting allows you to align the button to the left, center or right of its parent container. In Uniform mode this alignment will be set the same for all 6 breakpoints.

Clicking on the small plus icon will give you the ability to adjust the alignment of the button independently at each of the 6 responsive breakpoints giving you more granular control.

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.

Here you can tell this tool which icon library you're using, whether it is the Bootstrap Icons or Font Awesome. By choosing one you're then given the ability to then choose one of the preset icon choices or choose Custom and type in the unique identifier for the icon you'd like to use. The font identifiers can be found on the Bootstrap and Font Awesome sites.

By default the Icon Library setting is set to None, which disables the icon.

Allows you to choose which side of the button's text you wish to place the icon. You can choose from left, right or place the icon in a floating badge on the top right corner of the button.

When using the Badge setting you'll also be provided settings for styling the background and icon color as well as a shadow for the badge. You'll be able to choose from using a preset color palette option for the background or custom color picker.

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.