Configuration:

• The <StepperComponent> requires <StepperItemComponent> child elements with a header prop to be used at the step title.

  
      <StepperComponent 
          stepNumberBackgroundColour="#2C514C" 
          stepNumberTextColour="white" 
          stepNumberWidth="24px"
          stepNumberHeigth="24px"
          buttonStyles={{padding: "1rem 2rem", border: 0, backgroundColor: "#2C514C", color: "white"}}
          contentWrapperStyles={{padding: "1rem"}}
          stepTitleDirectionMobile="column"
          stepTitleDirectionDesktop="row"
          mobileBreakpoint={768}
      >
          <StepperItemComponent header="Step One">
              <div className="step-content">
                  <h2>Step one content</h2>
                      <p>
                          Cras vel dui molestie, condimentum urna ac, lacinia ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque bibendum, sapien ut rhoncus aliquam, ante metus auctor ante, ut pharetra purus dolor vitae ante. Aenean rhoncus eu leo non fermentum.
                      </p>
              </div>
          </StepperItemComponent>
  
          <StepperItemComponent header="Step Two">
              <div className="step-content">
                  <h2>Step Two content</h2>
                  <p>
                      Cras vel dui molestie, condimentum urna ac, lacinia ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque bibendum, sapien ut rhoncus aliquam, ante metus auctor ante, ut pharetra purus dolor vitae ante. Aenean rhoncus eu leo non fermentum.
                  </p>
              </div>
          </StepperItemComponent>
  
          <StepperItemComponent header="Step Three">
              <div className="step-content">
                  <h2>Step three content</h2>
                  <p>
                      Cras vel dui molestie, condimentum urna ac, lacinia ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque bibendum, sapien ut rhoncus aliquam, ante metus auctor ante, ut pharetra purus dolor vitae ante. Aenean rhoncus eu leo non fermentum.
                  </p>
              </div>
          </StepperItemComponent>
      </StepperComponent>  
  

Stepper Component Configuration:

• Background colour for step number.

  stepNumberBackgroundColour="#2C514C"

• Text colour for step number.

  stepNumberTextColour="white

• Step number width.

  stepNumberWidth="24px"

• Step number height.

  stepNumberHeigth="24px"

• Prev and next button styles.

  buttonStyles={{padding: "1rem 2rem", border: 0, backgroundColor: "#2C514C", color: "white"}}

• Content wrapper styles.

  contentWrapperStyles={{padding: "1rem"}}

• Step title direction on mobile.

  stepTitleDirectionMobile="column"

• Step title direction on desktop.

  stepTitleDirectionDesktop="row"

• Breakpoint for mobile step direction.

  mobileBreakpoint={768}

Stepper Component Configuration:

• Header to be used for the step.

  header="Step Three"