6 Ribbon types to choose

There are 6 default types here. Badge Element allows you to add some marks on your daily report. Please use our Badge Element for your supply.


Type 1

Type 2
Type 3
Type 4
Type 5
Type 6

Use ribbon options

Dozens of style options are ready. If you want you can fully-customize the look of badge shape, text and icon as well.

Ribbon Image

Ribbon position

This option is to control the position of ribbon element. Choose one you like.

Ribbon Image

Ribbon text

This option is to change the ribbon element text. Default is Ribbon.

Ribbon Image

Ribbon size

This option is to control the size of your ribbon element.

Badge Image

Create beautiful custom ribbons

Multiple styling options are here. Kick start your building websites with our Badge Element.

  • Set toggle as "Yes" add a ribbon.
  • Choose your ribbon type.
  • Choose your icon from the icon library.
  • Control all ribbon styles by using styling options.


Ribbon element options

Customize Elements Globally or Individually

  • Ribbon Type – Choose your favourite type of our 6 default ribbon types.
  • Ribbon Text – Input your ribbon text.
  • Ribbon Position – Control your ribbon position.
  • z-index – Control ribbon element z-index.
  • Icon Color – Control the ribbon icon color.
  • Typography – Control the ribbon label font style.
  • Background Color – Control the background color or gradient of ribbon element.
  • Size – Control the size of ribbon element.
  • Margin – Control the dimension of ribbon element.
  • Padding – Control the padding of ribbon element.