---
title: "Steps"
description: "With this Component, different Steps can be visualized e.g. a Process like a Customer Journey on Signing a Contract where each Step should be visualized."
path: https://www.eonshowroom.eon.com/en/specials/steps.html
lastModified: 2025-11-05T10:50:40.938Z
---

# Steps

# Steps

- Step: 1
  Variant: circle
  Active: false
  Label: [Learn](#description)
  Subline: What is possible?

- Step: 2
  Variant: circle
  Active: true
  Label: [Get inspired](#inspirations)
  Subline: How does it look like?

- Step: 3
  Variant: circle
  Active: false
  Label: [Do by Yourself](#how-to)
  Subline: How-to configure it?

[How to Configure](#how-to)

### Description

The Steps Component can be used to visualze different Steps, e.g. a Process like a Customer Journey on Signing a Contract

- One to five Steps are possible
- Different Variants are available

[Check it out on Storybook](https://storybook.web-ui.eon.com/eon/master/?path=/story/page-structure-steps-steps--interactive)

### Inspirations

- Step: 1
  Variant: pictogram
  Active: false
  Label: Sunny

- Step: 2
  Variant: pictogram
  Active: false
  Label: Cloudy

- Step: 3
  Variant: pictogram
  Active: true
  Label: Rainy

- Step: 4
  Variant: pictogram
  Active: false
  Label: Windy

- Step: 5
  Variant: pictogram
  Active: false
  Label: Partial Sunny

- Step: 1
  Variant: circle
  Active: false
  Label: Add Component in a Grid

- Step: 2
  Variant: circle
  Active: true
  Label: Configure each Step

- Step: 3
  Variant: circle
  Active: false
  Label: Do general Configuration

- Step: 1
  Variant: circle
  Active: false
  Label: Searching a Tarif

- Step: 2
  Variant: circle
  Active: true
  Label: Filling in a Form

- Step: 3
  Variant: circle
  Active: false
  Label: Signing the Contract

- Step: 4
  Variant: circle
  Active: false
  Label: Signing the Contract

- Step: 1
  Variant: circle
  Active: false
  Label: Go to Restaurant

- Step: 2
  Variant: circle
  Active: false
  Label: Order Meal

- Step: 3
  Variant: circle
  Active: false
  Label: Get Meal

- Step: 4
  Variant: circle
  Active: false
  Label: Eat Meal

- Step: 5
  Variant: circle
  Active: true
  Label: Pay for it

### Usage Rules & Features

##### Features

- One to five Steps are possible
- Can have different Icons

##### Properties

- Choose which Step is active
- Configure Content and Link for each Step

##### Design

- Can have different Icons
- Only Circles is also an Option
- Vertical Design on mobile is possible

##### In which Grid Columns does it fit?

| Grid Columns | Does it fit? |
| --- | --- |
| 2 | no |
| 3 | no |
| 4 | no |
| 5 | no |
| 6 | yes |
| 8 | yes |
| 9 | yes |
| 10 | only Edge Cases |
| 12 | only Edge Cases |

##### DO's

- If using more than 3 Steps, or, if having long Title(s), than vertical Design on mobile Viewports should be used

##### DONT's

- Don't use it in smaller Grids than 6 Column Grid
- Do not use less than two Steps

## Configuration

## Trackable Component

This Component can be tracked.

[Read more about Tracking](https://www.eonshowroom.eon.com/en/aem-basics/tracking.html)

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/EON_Pattern_7-1%3A2-1?fmt=webp-alpha)

- Step: 1
  Variant: circle
  Active: true
  Label: [Choose Type](#type)

- Step: 2
  Variant: circle
  Active: false
  Label: [Configure Steps](#config)

- Step: 3
  Variant: circle
  Active: false
  Label: [Maintain a Step](#step)

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/steps_type%20selection%3A3-4?fmt=webp)

### Choose a Type

At first, Editor needs to choose a Variant Type of the Steps Component. Following Types are available:

- Pictogram
- Circle

Depending on the Selection, different Options are available.

- Step: 1
  Variant: circle
  Active: false
  Label: [Choose Type](#type)

- Step: 2
  Variant: circle
  Active: true
  Label: [Configure Steps](#config)

- Step: 3
  Variant: circle
  Active: false
  Label: [Maintain a Step](#step)

### General Configuration

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/steps_picto-config%3A1-1?fmt=webp)

In Configuration Tab after selecting Type Pictogram, Editor can select which Step should be the Active One and which Icon should be shown for Done Steps.

Furthermore, Editor can select if Label should be shown for all Steps, only active Step, or for none of the Steps.

Moreover, Editor can check the Checkbox if Steps should come vertically on Mobile Viewport. This should be used if there are more than 3 Steps configured, or, if the Steps are having long Titles.

Beside Color Schemes can be choosen depending on Background Color.

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/steps_circle-config%3A1-1?fmt=webp)

In Configuration Tab after selecting Type Pictogram, Editor can choose between Step Styles. Possible Step Styles are "Standard", "Numbered", or "Icon".

Furthermore, Editor can select which Step should be the Active One and if Done Steps should be checked. Also a Tooltip can be shown on active Step.

Another Configuration Option is that Editor can select if Label should be shown for all Steps, only active Step, or for none of the Steps.

Moreover, Editor can check the Checkbox if Steps should come vertically. This should not be used if there are less than 3 Steps configured.

Additionally, Steps can have an Error State if needed.

Beside this, a small Size can also be choosen.

- Step: 1
  Variant: circle
  Active: false
  Label: [Choose Type](#type)

- Step: 2
  Variant: circle
  Active: false
  Label: [Configure Steps](#config)

- Step: 3
  Variant: circle
  Active: true
  Label: [Maintain a Step](#step)

### Maintain individual Steps

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/steps_picto-step%3A1-1?fmt=webp)

For each Step of Type Pictogram, Editor needs to add a Pictogram.

Furthermore, a Title for the Step and a Link is needed, which can also be configured to open in a new Window by checking the Checkbox.


###### Hint:

Anchor Links (Sections on same Page) can be added in the following Format:

> #id-of-anchor

#### Subline Text per Step

Each step can now have an optional **subline text**.
 Using the **“Show Sublines”** dropdown, you can control when the sublines are displayed: selecting none will show no sublines, on-active-item will display the subline only for the active step, and on-all-items will display sublines for all steps.

**Note:**

- If the subline text is empty, the component remains fully functional.
- **Developer Info:** This feature is implemented in the code. Changes to the behavior or structure of subline texts require updates in the component source (e.g., via Sublime Text or another IDE). Editor users do not need to modify the code to use the feature.

#### Keep in Mind

To get more / other Icons on your Icon List, just use FoundationNG Steps Component Pictogram / Done Icons Config.

[Read more about FoundationNG Steps Component Pictogram / Done Icons Config](https://www.eonshowroom.eon.com/en/aem-basics/configuration-pages.html#icon-pictogram)

![](https://www.eonshowroom.eon.com/cdm-assets/is/image/eon/steps_circle-step%3A1-1?fmt=webp)

For each Step of Type Circle, a Title for the Step and a Link is needed, which can also be configured to open in a new Window by checking the Checkbox.

If Step Style Icon is selected, also an Icon can be choosen.


###### Hint:

Anchor Links (Sections on same Page) can be added in the following Format:

> #id-of-anchor

- Step: 1
  Variant: circle
  Active: false
  Label: [Choose Type](#type)

- Step: 2
  Variant: circle
  Active: false
  Label: [Configure Steps](#config)

- Step: 3
  Variant: circle
  Active: false
  Label: [Maintain a Step](#step)