Step

<template>
 <Step>
  <StepItem
   color="primary-subtle"
   initials="1"
   size="sm"
  >
   <b-h level="3">
    Step One
   </b-h>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
  </StepItem>
  <StepItem
   color="primary-subtle"
   initials="2"
   size="sm"
  >
   <b-h level="3">
    Step Two
   </b-h>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
  </StepItem>
  <StepItem
   color="primary-subtle"
   initials="3"
   size="sm"
  >
   <b-h level="3">
    Third step
   </b-h>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
  </StepItem>
 </Step>
</template>

<template>
 <Step step="sm">
  <StepItem
   color="primary-subtle"
   initials="1"
   size="sm"
  >
   <b-h level="3">
    Step One
   </b-h>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
  </StepItem>
  <StepItem
   color="primary-subtle"
   initials="2"
   size="sm"
  >
   <b-h level="3">
    Step Two
   </b-h>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
  </StepItem>
  <StepItem
   color="primary-subtle"
   initials="3"
   size="sm"
  >
   <b-h level="3">
    Third step
   </b-h>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
  </StepItem>
 </Step>
</template>

<template>
 <Step>
  <StepItem
   color="primary-subtle"
   initials="1"
   size="xs"
  >
   <b-h level="3">
    Step xs
   </b-h>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
  </StepItem>
  <StepItem
   color="primary-subtle"
   initials="1"
   size="sm"
  >
   <b-h level="3">
    Step sm
   </b-h>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
  </StepItem>
  <StepItem
   color="primary-subtle"
   initials="2"
  >
   <b-h level="3">
    Step md (default)
   </b-h>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
  </StepItem>
  <StepItem
   color="primary-subtle"
   initials="3"
   size="lg"
  >
   <b-h level="3">
    Step lg
   </b-h>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
  </StepItem>
 </Step>
</template>

<template>
 <Step
  step="sm"
  type="centerd"
 >
  <StepItem
   color="primary-subtle"
   initials="1"
  >
   <b-h level="3">
    Step One
   </b-h>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
  </StepItem>
  <StepItem
   color="primary-subtle"
   initials="2"
  >
   <b-h level="3">
    Step Two
   </b-h>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
  </StepItem>
  <StepItem
   color="primary-subtle"
   initials="3"
  >
   <b-h level="3">
    Third step
   </b-h>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
  </StepItem>
 </Step>
</template>

<template>
 <Step
  step="sm"
  type="inline"
 >
  <StepItem
   color="primary-subtle"
   initials="1"
   size="sm"
  >
   <b-h
    level="6"
    margin="y-0"
   >
    Step One
   </b-h>
  </StepItem>
  <StepItem
   color="primary-subtle"
   initials="2"
   size="sm"
  >
   <b-h
    level="6"
    margin="y-0"
   >
    Step Two
   </b-h>
  </StepItem>
  <StepItem
   color="primary-subtle"
   initials="3"
   size="sm"
  >
   <b-h
    level="6"
    margin="y-0"
   >
    Third step
   </b-h>
  </StepItem>
 </Step>
</template>

<template>
 <Step
  step="sm"
  type="inline"
  item-between
 >
  <StepItem
   color="primary-subtle"
   initials="1"
   size="sm"
  >
   <b-h
    level="6"
    margin="y-0"
   >
    Step One
   </b-h>
  </StepItem>
  <StepItem
   color="primary-subtle"
   initials="2"
   size="sm"
  >
   <b-h
    level="6"
    margin="y-0"
   >
    Step Two
   </b-h>
  </StepItem>
  <StepItem
   color="primary-subtle"
   initials="3"
   size="sm"
  >
   <b-h
    level="6"
    margin="y-0"
   >
    Third step
   </b-h>
  </StepItem>
 </Step>
</template>

<template>
 <Step
  step="sm"
  border-last="0"
 >
  <StepItem
   color="primary-subtle"
   initials="1"
   size="sm"
  >
   <b-h level="3">
    Step One
   </b-h>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
  </StepItem>
  <StepItem
   color="primary-subtle"
   initials="2"
   size="sm"
  >
   <b-h level="3">
    Step Two
   </b-h>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
  </StepItem>
  <StepItem
   color="primary-subtle"
   initials="3"
   size="sm"
  >
   <b-h level="3">
    Third step
   </b-h>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
  </StepItem>
 </Step>
</template>

<template>
 <Step
  step="sm"
  border-last="0"
 >
  <StepItem
   color="primary-subtle"
   initials="1"
   size="sm"
  >
   <b-h level="3">
    Step One
   </b-h>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
  </StepItem>
  <StepItem
   color="primary-subtle"
   initials="2"
   size="sm"
  >
   <b-h level="3">
    Step Two
   </b-h>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
  </StepItem>
  <StepItem
   color="primary-subtle"
   initials="3"
   size="sm"
  >
   <b-h level="3">
    Third step
   </b-h>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
  </StepItem>
 </Step>
</template>

<template>
 <Step
  step="sm"
  border-style="dotted"
 >
  <StepItem
   color="primary-subtle"
   initials="1"
   size="sm"
  >
   <b-h level="3">
    Step One
   </b-h>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
  </StepItem>
  <StepItem
   color="primary-subtle"
   initials="2"
   size="sm"
  >
   <b-h level="3">
    Step Two
   </b-h>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
  </StepItem>
  <StepItem
   color="primary-subtle"
   initials="3"
   size="sm"
  >
   <b-h level="3">
    Third step
   </b-h>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
  </StepItem>
 </Step>
</template>

<template>
 <Step
  step="sm"
  border-style="dotted"
 >
  <StepItem
   color="primary-subtle"
   icon="bi:dot"
   size="sm"
  >
   <b-h level="3">
    Step One
   </b-h>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
  </StepItem>
  <StepItem
   color="primary-subtle"
   icon="bi:caret-right"
   size="sm"
  >
   <b-h level="3">
    Step Two
   </b-h>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
  </StepItem>
  <StepItem
   color="primary-subtle"
   icon="bi:caret-right-fill"
   size="sm"
  >
   <b-h level="3">
    Third step
   </b-h>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
  </StepItem>
 </Step>
</template>

<template>
 <Step
  step="xs"
 >
  <StepItem
   color="primary-subtle"
   size="sm"
   img-src="https://reqres.in/img/faces/1-image.jpg"
  >
   <b-h level="3">
    Step One
   </b-h>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
  </StepItem>
  <StepItem
   color="primary-subtle"
   img-src="https://reqres.in/img/faces/2-image.jpg"
   size="sm"
  >
   <b-h level="3">
    Step Two
   </b-h>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
  </StepItem>
  <StepItem
   color="primary-subtle"
   img-src="https://reqres.in/img/faces/3-image.jpg"
   size="sm"
  >
   <b-h level="3">
    Third step
   </b-h>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
  </StepItem>
 </Step>
</template>

<template>
 <Step
  type="timeline"
  step="sm"
 >
  <StepItem
   color="primary-subtle"
   initials="1"
   size="sm"
  >
   <b-h level="3">
    Step One
   </b-h>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
  </StepItem>
  <StepItem
   color="primary-subtle"
   initials="2"
   size="sm"
  >
   <b-h level="3">
    Step Two
   </b-h>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
  </StepItem>
  <StepItem
   color="primary-subtle"
   initials="3"
   size="sm"
  >
   <b-h level="3">
    Third step
   </b-h>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
  </StepItem>
 </Step>
</template>