<div class="wizard ">
<ul class="wizard__steps">
<li class="wizard__step ">
<i class="fas fa-check wizard__icon"></i> Sammu pealkiri
</li>
<li class="wizard__step is-active">
<i class="fas fa-check wizard__icon"></i> Isikuandmed
</li>
<li class="wizard__step ">
<i class="fas fa-check wizard__icon"></i> Sammu pealkiri
</li>
<li class="wizard__step ">
<i class="fas fa-check wizard__icon"></i> Sammu pealkiri
</li>
</ul>
<div class="wizard__content">
<div class="row justify-content-md-center">
<div class="col-md-8">
<div class="wizard__item is-visible">
<form class="form" action="">
<div class="textfield ">
<label class="textfield__label" for="">Eesnimi</label>
<div class="textfield__control ">
<input class="textfield__input" id="" placeholder="" type="" value="" />
</div>
</div>
<div class="textfield ">
<label class="textfield__label" for="">Perenimi</label>
<div class="textfield__control ">
<input class="textfield__input" id="" placeholder="" type="" value="" />
</div>
</div>
</form>
</div>
<div class="wizard__item">
other content
</div>
<div class="row">
<div class="col">
<button class="button button--triarity">
<i class="fas fa-arrow-left button__icon--left" aria-hidden="true" ></i>
Tagasi
</button>
</div>
<div class="col-sm-auto">
<button class="button button--secondary">
Katkesta
</button>
</div>
<div class="col-sm-auto">
<button class="button ">
Salvesta ja jätka
</button>
</div>
</div>
</div>
</div>
</div>
</div>
{
"steps": [
"Sammu pealkiri",
"Isikuandmed",
"Sammu pealkiri",
"Sammu pealkiri"
],
"active": "1",
"center": true
}
<div class="wizard wizard--vertical">
<ul class="wizard__steps">
<li class="wizard__step ">
<i class="fas fa-check wizard__icon"></i> Sammu pealkiri
</li>
<li class="wizard__step is-active">
<i class="fas fa-check wizard__icon"></i> Isikuandmed
</li>
<li class="wizard__step ">
<i class="fas fa-check wizard__icon"></i> Sammu pealkiri
</li>
<li class="wizard__step ">
<i class="fas fa-check wizard__icon"></i> Sammu pealkiri
</li>
</ul>
<div class="wizard__content">
<div class="row ">
<div class="col-md-8">
<div class="wizard__item is-visible">
<form class="form" action="">
<div class="textfield ">
<label class="textfield__label" for="">Eesnimi</label>
<div class="textfield__control ">
<input class="textfield__input" id="" placeholder="" type="" value="" />
</div>
</div>
<div class="textfield ">
<label class="textfield__label" for="">Perenimi</label>
<div class="textfield__control ">
<input class="textfield__input" id="" placeholder="" type="" value="" />
</div>
</div>
</form>
</div>
<div class="wizard__item">
other content
</div>
<div class="row">
<div class="col">
<button class="button button--triarity">
<i class="fas fa-arrow-left button__icon--left" aria-hidden="true" ></i>
Tagasi
</button>
</div>
<div class="col-sm-auto">
<button class="button button--secondary">
Katkesta
</button>
</div>
<div class="col-sm-auto">
<button class="button ">
Salvesta ja jätka
</button>
</div>
</div>
</div>
</div>
</div>
</div>
{
"steps": [
"Sammu pealkiri",
"Isikuandmed",
"Sammu pealkiri",
"Sammu pealkiri"
],
"active": "1",
"center": null,
"wizard-modifiers": "wizard--vertical"
}