Labeling content for our visitors is incredibly helpful. The Badge tool is great for organizating and categorizating your content, and helps different sections stand out within your layout.
Badges are simple and stright forward. Below we've included a few standard Badges with various styles.
We have incorporated Foundry's beautiful badges in other tools as well. Tools such as List, Badge Box, Navigation Bar and more. This let's you dress up the tools a bit and provide visitors with additional, important information.
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.
Used to set your text that will appear within your Badge.
When enabled you're given a Link setting control to add a link to the entirety of the badge, making it clickable by visitors.
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.
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.
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 styling the Badge background. You're also provided a a option to choose a custom one-off color as well.
Use this color picker to set the color of the text within the Badge tool. Allows you to set a complimentary color that works well with your Badge background color.
This setting allows you to give a nice rounded pill-like shape to the Badge.
We provide a quick way to add a subtle light gradient over the Badge. This simply includes a simple translucent white gradient over the button to give it a bit more depth.
This setting allows you to align the tool 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.
When enabled this setting allows you to place more than one Badge side-by-side in the layout. When using this feature the Badges you wish to display inline with one another must all have this setting enabled.
Used to add a decorative shadow to the 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.
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.