Step Block shows one step of a process with an icon, a number badge, a heading and some text. Place a few side by side and arrows link each step to the next. It is a quick way to explain how something works.
A bakery order, a hiring process, a hotel booking and a gym sign-up. Each step is its own Step Block, with different icon shapes, badges and arrow settings. Arrows show on wide screens only.
Four Step Blocks with Add badge on, round icon backgrounds and a soft orange arrow. Hide Arrow is on for the last step.
Pick loaves, pastries and cakes from the online menu.
Choose a delivery or collection time, from 7am the next day.
Your order goes in the oven that morning, never the day before.
Our van brings it to your door within your chosen hour.
Add badge is off. The icon border radius is 18px for rounded squares, and the arrows are a light indigo.
Share three projects you are proud of and a few lines about you.
A relaxed 45 minute video call with two of our designers.
Spend a paid day working with us on a real brief.
Transparent icon background with a 1px gold border, gold badges and a dark container background.
Check availability for up to 14 nights at a time.
Garden, harbour or loft, each with breakfast included.
Your key is waiting at the front desk, or use the late check-in box.
Hide Arrow is on for every step, so the blocks work in a two by two grid. Solid green icons, no container border.
Sign up in the app in about two minutes. No joining fee.
A coach shows you the equipment and sets up your first plan.
Strength, fitness or weight loss. We track progress every month.
Open 6am to 10pm every day, with 40 classes a week.
One element per step, placed side by side.
Place them in a grid or row. Each block has an icon, a heading and rich text.
Turn on Add badge and enter the step number or a short label.
Turn on Hide Arrow on the final step so the arrow does not point to nothing.
Everything you need to lay out a simple process.
Choose any icon and set its size, colour and background shape.
Add a small badge with a number or label, with its own colours and border.
An arrow links each step to the next. Hide it on any step you like.
Arrows are hidden below 933px wide, so stacked steps stay tidy on phones and tablets.
Each step has a heading and a rich text area for the description.
Set the width, background, borders, and heading and content fonts.
Anywhere you need to explain what happens next.
Explain your service in three or four simple steps.
Show new customers what to do after they sign up.
Walk buyers through ordering, delivery and setup.
Break a setup process into clear stages.
Show how to book, confirm and attend.
Lay out the phases of a project from start to finish.
This is the full list of settings in the Breakdance editor, with their default values.
| Control | What it does | Default |
|---|---|---|
| Content | ||
| Icon | The icon for the step. | Accessibility icon |
| Heading | The step title. | Title |
| Content | Rich text description. | My Content |
| Add badge | Show a number badge on the icon. | On |
| Badge Text | The badge number or label. | 1 |
| Hide Arrow | Remove the arrow after this step. | Off |
| Icon Design | ||
| Background Color | Background behind the icon. | #C7C7C7 |
| Borders | Icon border and radius. | 500px radius (round) |
| Icon Color | Colour of the icon. | #3E3E3E |
| Icon Size | Size of the icon in px. | 50px |
| Container | ||
| Width | Width of the step block. | 33% |
| Background Color | Background of the step block. | — |
| Borders | Border and radius of the block. | 1px, 5px radius |
| Header Font | Heading typography and alignment. | — |
| Content Font | Content typography and alignment. | — |
| Arrow Style | ||
| Color | Arrow colour. Responsive. | #7D7D7D |
| Badge Style | ||
| Background Color | Badge background. | #E06212 |
| Text Color | Badge text colour. | White |
| Borders | Badge border and radius. | — |
As many as you like. Each step is its own element, so add one for every step.
Select the last Step Block and turn on Hide Arrow.
The arrows are hidden below 933px wide. Set your grid to stack the steps and they read top to bottom.
The arrow reaches about 60px past the right edge of the block, so leave a gap of 60 to 70px between steps in a row.
Yes. Change the icon border radius for squares, as in the hiring demo, or give the icon a border and a transparent background, as in the hotel demo.
Yes. Turn off Add badge, as in the hiring demo above.
Step Element is included with Phox Elements, along with 140+ other premium elements for Breakdance.