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.

Basic Badge
Pill-Shaped Badge
Subtle Gradient
Shadowed Badge
1_captain pirate

Not all treasure’s silver and gold, mate.

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.


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.


Badge Label

Used to set your text that will appear within your Badge.

Add Link to 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.

Include Base Margin

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.

Font Weight

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.

Badge Text

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.

Gradient Overlay

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.


Alignment (Uniform)

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.

Alignment (Non-Uniform)

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.

Display as Inline Badge

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.

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.


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.