New - Badge stack!


New! Badge stack! Create badges for your stacks.
Two types with switch: round, for a single FontAwesome icon (or a single number or letter), and with corners, for multiple icons or text.

For text there is a choice of font: Default, Arial, FontAwesome, Fonts Stack. Also in the settings, there is a font size, weight, and color.

For the badge itself, you can configure its size, location, distance from the edge, shape, padding, selecting background: color or gradient (and select a direction from the list).

Buttons “Other”:
1 - adding a border with a color and size setting.
2 - adding a slope with selecting the angle of inclination.
3 - adding a pulsing effect around the badge with size, color and time settings.
4 - adding jump/floating effect.

Stack page and examples :arrow_right:


Version 1.0.3:
Added the center position of the Badge.
Added the ability to enable another border.
Added the ability to enable displaying the Badge when the cursor is hovering.
Added a thin border for the Pulse.
Added a small shadow for the Border (the border size must be zero).

Almost all examples of stack functions are provided on page.:

1 Like

Version 1.0.4:
The code was slightly rewritten.
Removed the choice of the FontAwesome font.
Now you can use plain code instead of Unicode, even in conjunction with plain text.
Added a button for adding a link for the Badge.
Now the Badge can be used without a drop zone for stacks.


Version 1.0.5:

  • Now you can set the width equal to the height for a square shape.
  • The Overflow was moved and added by the button to the More.
  • Increased the size of the distance in the minus direction.
  • Some fix.

In addition to the Badge Stack, a version for using images as badges has been released, called the Badge Image Stack. You can use pictures for the background or pictures separately (raster and SVG are supported). Added animation.

P.S. SVG is not supported for backgrounds.