```
const { Step, Steps, StepperContent } = Stepper;

<div>
  <Stepper size="md" withRightArrow>
    <Steps>
      <Step icon="sigfox" value={{ title: 'What is Sigfox' }} onClick={console.log} enabled>
        What is Sigfox
      </Step>
      <Step icon="study" value={{ title: 'Qualification' }} enabled>
        Qualification
      </Step>
      <Step icon="start" value={{title: 'Prototyping' }} enabled>
        Prototyping
      </Step>
      <Step icon="development" value={{ title: 'Development' }} enabled>
        Development
      </Step>
      <Step icon="certification" value={{ title: 'Certification' }} enabled>
        Certification
      </Step>
      <Step icon="industrialization" value={{ title: 'Industrialization' }} component="a" href="#http//google.com/" enabled>
        Industrialization
      </Step>
    </Steps>
    <StepperContent>
      {(value) => {
        const { title } = value || {};
        return (
          <div>
            <Title level={3} variant="dash-lagoon">{title}</Title>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus convallis mauris in sodales finibus.
              Aenean convallis luctus nibh ut sollicitudin. Curabitur pellentesque pretium augue in consequat.
              Proin porta sapien non tellus tempus ultricies.
              Suspendisse in odio in risus fringilla cursus sit amet non erat.
              Vivamus at urna tincidunt, fermentum ex a, convallis arcu. Cras congue libero a feugiat dictum.
              Quisque massa erat, tristique a feugiat et, mollis quis elit. Nulla magna erat, maximus eu metus et,
              maximus porttitor massa. Curabitur lobortis, nibh at sodales ornare,
              felis lectus tincidunt mauris, at lobortis sem nunc mollis turpis.
              Ut id velit a turpis sagittis mollis a eu quam. Donec vitae urna ac erat laoreet ullamcorper non ut justo.
            </p>
          </div>
        )
      }}
    </StepperContent>
  </Stepper>
  <Stepper size="sm" withBorder withRightArrow>
    <Steps>
      <Step value={{ title: 'What is Sigfox' }} onClick={console.log} enabled>
        What is Sigfox
      </Step>
      <Step value={{ title: 'Qualification' }} enabled>
        Qualification
      </Step>
      <Step value={{title: 'Prototyping' }} enabled>
        Prototyping
      </Step>
      <Step value={{ title: 'Development' }} enabled selected>
        Development
      </Step>
      <Step value={{ title: 'Certification' }}>
        Certification
      </Step>
      <Step value={{ title: 'Industrialisation' }}>
        Industrialisation
      </Step>
    </Steps>
    <StepperContent>
      {(value) => {
        const { title } = value || {};
        return (
          <div>
            <Title level={4} variant="dash-lagoon" withoutMarge>{title}</Title>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus convallis mauris in sodales finibus.
              Aenean convallis luctus nibh ut sollicitudin. Curabitur pellentesque pretium augue in consequat.
              Proin porta sapien non tellus tempus ultricies.
              Suspendisse in odio in risus fringilla cursus sit amet non erat.
              Vivamus at urna tincidunt, fermentum ex a, convallis arcu. Cras congue libero a feugiat dictum.
              Quisque massa erat, tristique a feugiat et, mollis quis elit. Nulla magna erat, maximus eu metus et,
              maximus porttitor massa. Curabitur lobortis, nibh at sodales ornare,
              felis lectus tincidunt mauris, at lobortis sem nunc mollis turpis.
              Ut id velit a turpis sagittis mollis a eu quam. Donec vitae urna ac erat laoreet ullamcorper non ut justo.
            </p>
          </div>
        )
      }}
    </StepperContent>
  </Stepper>
  <Steps size="sm">
    <Step icon="sigfox" value={{ title: 'What is Sigfox' }} onClick={console.log} enabled>
      What is Sigfox
    </Step>
    <Step icon="study" value={{ title: 'Qualification' }} enabled>
      Qualification
    </Step>
    <Step icon="start" value={{title: 'Prototyping' }} enabled>
      Prototyping
    </Step>
  </Steps>
  <Steps size="sm">
    <Step value={{ title: 'What is Sigfox' }} onClick={console.log} enabled>
      What is Sigfox
    </Step>
    <Step value={{ title: 'Qualification' }} enabled>
      Qualification
    </Step>
    <Step value={{title: 'Prototyping' }} enabled>
      Prototyping
    </Step>
  </Steps>
  <Steps size="md">
    <Step icon="sigfox" value={{ title: 'What is Sigfox' }} onClick={console.log} enabled>
      What is Sigfox
    </Step>
    <Step icon="study" value={{ title: 'Qualification' }} enabled>
      Qualification
    </Step>
    <Step icon="start" value={{title: 'Prototyping' }} enabled>
      Prototyping
    </Step>
  </Steps>
  <Steps size="lg">
    <Step icon="sigfox" value={{ title: 'What is Sigfox' }} onClick={console.log} enabled>
      What is Sigfox
    </Step>
    <Step icon="study" value={{ title: 'Qualification' }} enabled>
      Qualification
    </Step>
    <Step icon="start" value={{title: 'Prototyping' }} enabled>
      Prototyping
    </Step>
  </Steps>
</div>
```