Step 1
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, labore fugiat.
Showing process or how we work is another crucial part of a website. It assists the client with understanding the activities of a brand/organization. Similarly, it intricate concerning how a client can accomplish their objective. It's the most appealing way to navigate the user to the right path.
It's named as Four Step Format because limited to four-step only. If we increase the steps, it might look messy on smaller screens, and the design might break.
Sketch
Lorem ipsum dolor sit amet conse
Sketch
Lorem ipsum dolor sit amet conse
Sketch
Lorem ipsum dolor sit amet conse
Sketch
Lorem ipsum dolor sit amet conse
<section>
<div class="container">
<ul class="process-simple-wrapper">
<li>
<div class="icon">
<i class="bi bi-award"></i>
</div>
<div class="content text-center">
<p class="font-500 mb-2">
Sketch
</p>
<p class="fs-7 test-light">
Lorem ipsum dolor sit amet conse
</p>
</div>
</li>
<li>
<div class="icon">
<i class="bi bi-award"></i>
</div>
<div class="content text-center">
<p class="font-500 mb-2">
Sketch
</p>
<p class="fs-7 test-light">
Lorem ipsum dolor sit amet conse
</p>
</div>
</li>
<li>
<div class="icon">
<i class="bi bi-award"></i>
</div>
<div class="content text-center">
<p class="font-500 mb-2">
Sketch
</p>
<p class="fs-7 test-light">
Lorem ipsum dolor sit amet conse
</p>
</div>
</li>
<li>
<div class="icon">
<i class="bi bi-award"></i>
</div>
<div class="content text-center">
<p class="font-500 mb-2">
Sketch
</p>
<p class="fs-7 test-light">
Lorem ipsum dolor sit amet conse
</p>
</div>
</li>
</ul>
</div>
</section>
Process Carousel consists of a Bootstrap Carousel, but we have made the steps out of indicators. It's Once of the best way available to show a process.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, labore fugiat.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, labore fugiat.
<section>
<div class="container">
<div id="carouselProcess" class="carousel slide carousel-process-wrapper" data-bs-ride="carousel">
<div class="row">
<div class="col-md-6">
<ol class="carousel-indicators">
<li data-bs-target="#carouselProcess" data-bs-slide-to="0" class="active">
<div class="steps-wrapper">
<div class="icon">
<i class="bi bi-person"></i>
</div>
<div class="content">
<h3>
Step 1
</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, labore fugiat.
</p>
</div>
</div>
</li>
<li data-bs-target="#carouselProcess" data-bs-slide-to="1">
<div class="steps-wrapper">
<div class="icon">
<i class="bi bi-person"></i>
</div>
<div class="content">
<h3>
Step 2
</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, labore fugiat.
</p>
</div>
</div>
</li>
</ol>
</div>
<div class="col-md-6">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://bootstraprev.com/img/slide6.jpg" alt="" class="img-fluid">
</div>
<div class="carousel-item">
<img src="https://bootstraprev.com/img/slide6.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
</section>