Badge Box

Base Foundry stack

Add specially placed, custom styled, indicator icons to just about any content using Badge Box as a parent stack to your content.

  • Add badge to just about any element
  • Choose from over 300 icons for your badge
  • Easily set size of badge
  • Customize colors of badge, icon and border
  • Align badge left, right or center, along any of the four sides
  • Adjust badge border size
  • Add a link to your badge
  • Please Note: Features on this page marked with the purple moon icon are compatible with Foundry's Dark Mode.

Example

Checkmark icon

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.

Coffee icon

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.

Comment icon

With this example we’ve also placed a Card stack within our Badge Box and centered the badge icon, but this time along the bottom of the Card stack.

We changed our background and border colors for this version as well as added a link to the badge.

A small note here.

Using Badge Box

General

Remove Base Margin
Allows you to disable the preset standard spacing that is applied to the bottom of the Badge Box stack.

Style

Icon
Choose which icon you’d like to use as your badge. We offer over 300 different icons to choose from.

Alignment
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.

Badge Size
Set the overall size of the badge itself.

Style
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.

Starting with Foundry v2 you're also able to opt for a custom gradient background. v2

Border Size
Set the width of the border on the badge. You can remove the border by setting the width to zero.

Badge Link

Add Link to Badge
Allows you to add a link to your badge that goes to an internal page or an external site.

Insight
Attention Grabbing

The Badge Box is designed mostly for the aesthetics it provides and its ability to pull your visitor's attention to a specific item. That said, it can also have a link applied to the badge itself, making it multi-purpose and flexible.