Table of Contents
A ribbon or badge highlights a particular table column, especially if the product is on sale. Ninja Tables offers a Ribbon Element in the Drag and Drop builder that makes your pricing or product table stand out.
Ribbons or badges are used in pricing tables to highlight sales items, top products, or small texts.
Ninja Tables offer 4 types of ribbons- Side, Bookmark, Corner, and Horizontal.
Let’s see how it works.
Properties of Ribbon Element #
| Scope | Option Name | Type |
|---|---|---|
| General | Ribbon type | Side, Bookmark, Corner, and Horizontal |
| Ribbon Position | Left and Right | |
| Ribbon Width | Numeric Value, drag bar | |
| Ribbon Height | Numeric Value, drag bar | |
| X Offset | Numeric Value, drag bar | |
| Y Offset | Numeric Value, drag bar | |
| Text | Ribbon Text | Text Field, drag bar |
| Font Color | Graphical Color Selection | |
| Font Size | Numeric Value, drag bar | |
| Font X Offset | Numeric Value, drag bar | |
| Font Y Offset | Numeric Value, drag bar | |
| Background | Background Color | Graphical Color Selection |
General #
- Ribbon type: Change the ribbon type to position in a corner or a rectangular format. By default, it is set to corner.
- Ribbon Position: You can position the Ribbon on either Left or Right for a Corner ribbon.
- Ribbon Width: You can change the width of the ribbon.
- Ribbon Height: You can change the height of the ribbon.
- X Offset: You can change the X offset to move the ribbon horizontally. Available for bookmark and corner types.
- Y Offset: You can change the Y offset, which means moving the ribbon vertically. By default, it is set to -11.
Text #
- Ribbon Text: You can change the text color of the ribbon.
- Font Color: You can change the color of the text. By default, it is set to Black.
- Font Size: You can change the size of the text. By default, it is set to 15.
- Font X Offset: You can change the X offset of the Font, which means you can move the Text of the ribbon horizontally.
- Font Y Offset: You can change the Y offset of the Font, which means you can move the Text of the ribbon vertically.
- Font Style: Change font style to bold, italic, or underlined.
Background #
Background Color: You can change the background color of the ribbon.
Conclusion #
If a cell or column has a ribbon or badge, it shows the item is on sale or is an exclusive product. The ribbon element in Ninja Tables drag and drop
Let us know your thoughts and questions in the comment box.
