In this example we’ve placed a Header and Paragraph stack within the Badge Box stack. To give it a bit of style we adding some padding to the Bagde Box stack as well as a nice grey background and some rounded corners.
We’ve opted to place the badge icon in the upper-right corner and left its default styling.
With this example we’ve placed a Card stack within our Badge Box and centered the badge icon along the top of the Card stack.
We’ve also styled the badge a bit differently, sizing the badge up and also changing its border size and its background color.
A small note here.
Remove Base Margin
Allows you to disable the preset standard spacing that is applied to the bottom of the Badge Box stack.
Choose which icon you’d like to use as your badge. We offer over 300 different icons to choose from.
Allows you to set the horizontal and vertical alignment of the badge. Choose if the badge will be located to the left, right or center as well as the top, middle or bottom of the Badge Box stack.
Set the overall size of the badge itself.
Use one of Foundry’s built-in color swatch presets or make use of the RapidWeaver color picker to set your own custom colors for the badge background (both normal and hover), its icon and the badge border.
Set the width of the border on the badge. You can remove the border by setting the width to zero.
Add Link to Badge
Allows you to add a link to your badge that goes to an internal page or an external site.
Stay up to date on future versions of Foundry, as well as important news, updates and more!
This site is built using Foundry for RapidWeaver