Badge Box
Add specially placed icons and badges to just about any content element on your page using Badge Box as a parent item for your content.
Sorry, Goose, but it’s time to buzz the tower.
In previous versions of Badge Box, the tool handled not only the positioning of elements but also the styling of them as well. This limited what the tool was capable of in some ways.
This version of Badge Box however uses the Badge and Icons tools for its content, putting the onus of styling of them so it can do more with positioning. This makes things more modular and opens up what Badge Box is capable of accomplishing and helping you accomplish.
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.
Position
Vertical Position
Badge Box allows you to place your badge content at the top, center or bottom of your content item. By default the positioning is the same at all of the responsive breakpoints. Clicking the small + icon gives you the ability to adjust both the position and vertical offset value at each of the 6 responsive breakpoints individually.
Vertical Offset
This is the amount of offset that will be applied to the badge item. By default this is a uniform value across all 6 breakpoints. Clicking the small + icon above the Vertical Position setting will give you the option to adjust this value at each individual responsive breakpoint.
Offset Units
Lets you choose what units you'd like to use for the offset value. You can choose from Pixels (px), Root Em (rem), or Percentage (%). The default option is Pixels (px).
Offset
This is the amount of offset that will be applied to the badge item in the horizontal direction. By default this is a uniform value across all 6 breakpoints. Clicking the small + icon will give you the option to adjust this value at each individual responsive breakpoint.
Offset Units
Lets you choose what units you'd like to use for the offset value. You can choose from Pixels (px), Root Em (rem), or Percentage (%). The default option is Pixels (px).
The horizontal alignment of the Icons or Badge tools is handled in those child items themselves. This keeps us from haiving to redefine controls over and over again and keeps Foundry as modular as possible.
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
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.
Child Items
The Badge Box's contents that make up the badge itself are pulled from other tools in Foundry. This helps to keep everything as modular as we can, and opens up more possibilities. Badge Box allows you to add an Icons or Badge tool and those child items are styled from their own controls. For more information regarding their settings, see their documentation pages: