Features

  • 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

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.

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.

Sign up for The Forge newsletter

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

© 2006-2016 Elixir Graphics | Contact Us