Desktop view

Style - Highlight number

screenshot process

Style - Standard number

screenshot process

Style - Icon

screenshot process

Changed starting number

screenshot process

Process steps with image

screenshot process

Mobile view

Screenshot process steps
Screenshot process steps
Screenshot process steps
Screenshot process steps
Screenshot process steps

How it works

  • The component allows usage of 3 different styles:
    • Highlight number – no leading zero
    • Standard number – with leading zero
    • Icon
  • The component is displayed horizontally or vertically (configured via the property). In mobile view, it is always displayed vertically.
  • Vertical display: The vertical line after the last step may or may not be displayed.
  • Text alignment
    • center aligned on horizontal layout
    • left aligned on vertical layout    
  • The starting number can be defined
  • An image can be entered into the component

Reference for publisher

AEM view

AEM view - process steps component