Minimal Order Steps — Dashed Connector
Simple “how to order” steps joined by a dashed line.
How to use: add the BD Order Steps (COD) block and choose minimal · dashed · plain in its style settings
What you can customize in this widget
Ribbon Order Steps — Solid Line, Round Numbers
Steps on a ribbon with round number badges.
How to use: add the BD Order Steps (COD) block and choose ribbon · solid · circle in its style settings
What you can customize in this widget
Timeline Order Steps — Dotted Line
Steps on a vertical timeline.
How to use: add the BD Order Steps (COD) block and choose timeline · dotted · rounded in its style settings
What you can customize in this widget
Zig-Zag Order Steps — Arrow Connectors
Steps zig-zag with arrows between them.
How to use: add the BD Order Steps (COD) block and choose zigzag · arrow · square in its style settings
What you can customize in this widget
Classic Order Steps — No Connector
Classic step boxes without lines.
How to use: add the BD Order Steps (COD) block and choose classic · plain in its style settings
What you can customize in this widget
Card Order Steps — Dashed, Round Numbers
Each step in a card.
How to use: add the BD Order Steps (COD) block and choose cards · dashed · circle in its style settings
What you can customize in this widget
Soft Order Steps — Solid Line
Soft pastel steps.
How to use: add the BD Order Steps (COD) block and choose soft · solid · rounded in its style settings
What you can customize in this widget
Outline Order Steps — Dotted Square
Outline boxes with square numbers.
How to use: add the BD Order Steps (COD) block and choose outline · dotted · square in its style settings
What you can customize in this widget
Dark Order Steps — Arrows
Dark steps with arrows.
How to use: add the BD Order Steps (COD) block and choose dark · arrow · plain in its style settings
What you can customize in this widget
Gradient Order Steps — Round Numbers
Gradient steps with round badges.
How to use: add the BD Order Steps (COD) block and choose gradient · circle in its style settings
What you can customize in this widget
Minimal Order Steps — Rounded Numbers
Minimal with rounded badges.
How to use: add the BD Order Steps (COD) block and choose minimal · dashed · rounded in its style settings
What you can customize in this widget
Ribbon Order Steps — Square Numbers
Ribbon steps with square badges.
How to use: add the BD Order Steps (COD) block and choose ribbon · solid · square in its style settings
What you can customize in this widget
Timeline Order Steps — Plain
Plain timeline.
How to use: add the BD Order Steps (COD) block and choose timeline · dotted · plain in its style settings
What you can customize in this widget
Zig-Zag Order Steps — Round Numbers
Zig-zag with round badges.
How to use: add the BD Order Steps (COD) block and choose zigzag · arrow · circle in its style settings
What you can customize in this widget
Classic Order Steps — Rounded
Classic steps with rounded badges.
How to use: add the BD Order Steps (COD) block and choose classic · rounded in its style settings
What you can customize in this widget
Card Order Steps — Square Numbers
Card steps — clean default.
How to use: add the BD Order Steps (COD) block and choose cards · dashed · square in its style settings




















