Series of steps or conditions that the user needs to complete in order to accomplish a goal.
import Steps, { Step } from '../components/Steps'
{/* Default inline steps */}
<Steps>
<Step active>Basic info</Step>
<Step active>Company details</Step>
<Step>Job details</Step>
<Step>Post a job</Step>
</Steps>
import Steps, { Step } from '../components/Steps'
{/* Clickable inline steps (links) */}
<Steps>
<Step href='#' active>Basic info</Step>
<Step href='#'>Company details</Step>
<Step href='#'>Job details</Step>
<Step href='#'>Post a job</Step>
</Steps>
Odio velit, massa augue etiam in parturient volutpat orci. Pulvinar amet, at est ac curabitur mauris, semper cursus metus. Imperdiet sed massa amet at turpis. Dis risus, donec in ac ultricies tempor eu, amet.
Vitae erat ornare facilisi id sollicitudin turpis tempus, semper. Velit integer et volutpat, a. Massa ut amet amet, vitae nunc nulla sed.
Ut mattis nascetur aliquam neque velit nunc sed. Morbi congue mauris amet ultrices molestie tellus proin odio diam. Feugiat elit, habitasse egestas egestas id nec potenti. Donec convallis donec tristique mattis et viverra.
Tempor nullam pellentesque suspendisse nec. Arcu sagittis sed ut diam in ultrices. Leo lacinia feugiat interdum pellentesque nulla vitae duis.
import Steps, { Step } from '../components/Steps'
{/* Vertical inline steps */}
<Steps vertical>
<Step active>
<h5 className='mb-2 pb-1'>2019</h5>
<p className='mb-0'>Odio velit, massa augue etiam in parturient volutpat orci. Pulvinar amet, at est ac curabitur mauris, semper cursus metus. Imperdiet sed massa amet at turpis. Dis risus, donec in ac ultricies tempor eu, amet.</p>
</Step>
<Step active>
<h5 className='mb-2 pb-1'>2020</h5>
<p className='mb-0'>Vitae erat ornare facilisi id sollicitudin turpis tempus, semper. Velit integer et volutpat, a. Massa ut amet amet, vitae nunc nulla sed.</p>
</Step>
<Step>
<h5 className='mb-2 pb-1'>2021</h5>
<p className='mb-0'>Ut mattis nascetur aliquam neque velit nunc sed. Morbi congue mauris amet ultrices molestie tellus proin odio diam. Feugiat elit, habitasse egestas egestas id nec potenti. Donec convallis donec tristique mattis et viverra.</p>
</Step>
<Step>
<h5 className='mb-2 pb-1'>2022</h5>
<p className='mb-0'>Tempor nullam pellentesque suspendisse nec. Arcu sagittis sed ut diam in ultrices. Leo lacinia feugiat interdum pellentesque nulla vitae duis.</p>
</Step>
</Steps>
import Steps, { Step } from '../components/Steps'
{/* Light inline steps */}
<Steps light>
<Step active>Basic info</Step>
<Step active>Company details</Step>
<Step>Job details</Step>
<Step>Post a job</Step>
</Steps>
In volutpat lacus orci volutpat nulla tristique eu. Ullamcorper in est lectus cras.
Cursus duis ridiculus purus eget velit mattis id vel. Semper aliquet auctor cras dui.
Sit auctor aliquam leo duis. Praesent ut penatibus faucibus nibh arcu tempor.
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import StepCard from '../components/StepCard'
{/* Card based steps */}
<Row>
<Col md={4}>
<StepCard
number='01'
title='Create a Job Ad'
text='In volutpat lacus orci volutpat nulla tristique eu. Ullamcorper in est lectus cras.'
/>
</Col>
<Col md={4}>
<StepCard
number='02'
title='Select a Pricing Plan'
text='Cursus duis ridiculus purus eget velit mattis id vel. Semper aliquet auctor cras dui.'
/>
</Col>
<Col md={4}>
<StepCard
number='03'
title='Post Your Job'
text='Sit auctor aliquam leo duis. Praesent ut penatibus faucibus nibh arcu tempor.'
/>
</Col>
</Row>
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import StepCard from '../../components/StepCard'
{/* Clickable card based steps (links) */}
<Row>
<Col md={4}>
<StepCard
href='#'
number='01'
title='Create a Job Ad'
text='In volutpat lacus orci volutpat nulla tristique eu. Ullamcorper in est lectus cras.'
/>
</Col>
<Col md={4}>
<StepCard
href='#'
number='02'
title='Select a Pricing Plan'
text='Cursus duis ridiculus purus eget velit mattis id vel. Semper aliquet auctor cras dui.'
/>
</Col>
<Col md={4}>
<StepCard
href='#'
number='03'
title='Post Your Job'
text='Sit auctor aliquam leo duis. Praesent ut penatibus faucibus nibh arcu tempor.'
/>
</Col>
</Row>
In volutpat lacus orci volutpat nulla tristique eu. Ullamcorper in est lectus cras.
Cursus duis ridiculus purus eget velit mattis id vel. Semper aliquet auctor cras dui.
import StepCard from '../../components/StepCard'
{/* Center aligned step */}
<StepCard
number='01'
title='Create a Job Ad'
text='In volutpat lacus orci volutpat nulla tristique eu. Ullamcorper in est lectus cras.'
align='center'
/>
{/* Right aligned step */}
<StepCard
number='02'
title='Select a Pricing Plan'
text='Cursus duis ridiculus purus eget velit mattis id vel. Semper aliquet auctor cras dui.'
align='end'
/>
In volutpat lacus orci volutpat nulla tristique eu. Ullamcorper in est lectus cras.
Cursus duis ridiculus purus eget velit mattis id vel. Semper aliquet auctor cras dui.
Sit auctor aliquam leo duis. Praesent ut penatibus faucibus nibh arcu tempor.
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import StepCard from '../../components/StepCard'
{/* Light card based steps */}
<Row>
<Col md={4}>
<StepCard
number='01'
title='Create a Job Ad'
text='In volutpat lacus orci volutpat nulla tristique eu. Ullamcorper in est lectus cras.'
light
/>
</Col>
<Col md={4}>
<StepCard
number='02'
title='Select a Pricing Plan'
text='Cursus duis ridiculus purus eget velit mattis id vel. Semper aliquet auctor cras dui.'
light
/>
</Col>
<Col md={4}>
<StepCard
number='03'
title='Post Your Job'
text='Sit auctor aliquam leo duis. Praesent ut penatibus faucibus nibh arcu tempor.'
light
/>
</Col>
</Row>