Process
These sections break down complex workflows or procedures into clear, step-by-step visuals or descriptions.
Overview
"Process" components break down complex workflows or procedures into clear, step-by-step visuals or descriptions. These sections often use numbered steps, icons, or timelines to guide users through a journey or explain how something works, making it easier to understand and follow the progression from start to finish.
Examples
Below are a few examples of "Process" sections.
Example 1
Here’s How It Works
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusd libero corpori digniss vident.
1
Consultation
Lorem ipsum dolor sit amet consectetur adipisicing elit.
2
Development
Lorem ipsum dolor sit amet consectetur adipisicing elit.
3
Maintenance
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<section class="bg-body py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6">
<h2 class="mb-2">Here’s How It Works</h2>
<p class="text-muted mb-4">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusd libero
corpori digniss vident.
</p>
<div class="d-flex mb-4">
<div class="rounded-circle text-bg-primary fw-semibold d-flex justify-content-center align-items-center flex-shrink-0"
style="width: 40px; height: 40px; font-size: 1rem; line-height: 1;">1</div>
<div class="ms-3">
<h5 class="mb-1">Consultation</h5>
<p class="mb-0 text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="d-flex mb-4">
<div class="rounded-circle text-bg-primary fw-semibold d-flex justify-content-center align-items-center flex-shrink-0"
style="width: 40px; height: 40px; font-size: 1rem; line-height: 1;">2</div>
<div class="ms-3">
<h5 class="mb-1">Development</h5>
<p class="mb-0 text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
<div class="d-flex">
<div class="rounded-circle text-bg-primary fw-semibold d-flex justify-content-center align-items-center flex-shrink-0"
style="width: 40px; height: 40px; font-size: 1rem; line-height: 1;">3</div>
<div class="ms-3">
<h5 class="mb-1">Maintenance</h5>
<p class="mb-0 text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="col-lg-5 offset-lg-1 mt-4 mt-lg-0">
<img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder+Image" class="img-fluid rounded-4" alt="Process Image">
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="row align-items-center"> <div class="col-lg-6"> <h2
class="mb-2">Here’s How It Works</h2> <p class="text-muted
mb-4"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusd libero
corpori digniss vident. </p> <div class="d-flex mb-4"> <div
class="rounded-circle text-bg-primary fw-semibold d-flex justify-content-center
align-items-center flex-shrink-0" style="width: 40px; height: 40px; font-size: 1rem;
line-height: 1;">1</div> <div class="ms-3"> <h5
class="mb-1">Consultation</h5> <p class="mb-0
text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div> </div> <div class="d-flex mb-4"> <div
class="rounded-circle text-bg-primary fw-semibold d-flex justify-content-center
align-items-center flex-shrink-0" style="width: 40px; height: 40px; font-size: 1rem;
line-height: 1;">2</div> <div class="ms-3"> <h5
class="mb-1">Development</h5> <p class="mb-0
text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div> </div> <div class="d-flex"> <div
class="rounded-circle text-bg-primary fw-semibold d-flex justify-content-center
align-items-center flex-shrink-0" style="width: 40px; height: 40px; font-size: 1rem;
line-height: 1;">3</div> <div class="ms-3"> <h5
class="mb-1">Maintenance</h5> <p class="mb-0
text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div> </div> </div> <div class="col-lg-5 offset-lg-1 mt-4
mt-lg-0"> <img
src="https://placehold.co/540x540/31343C/EEE?text=Placeholder+Image"
class="img-fluid rounded-4" alt="Process Image"> </div>
</div> </div> </section>
Example 2
Our Process
How We Do Things
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusd libero corpori digniss vident.
1. Planning
Lorem ipsum dolor sit amet consectetur adipisicing elit.
2. Development
Lorem ipsum dolor sit amet consectetur adipisicing elit.
3. Launch
Lorem ipsum dolor sit amet consectetur adipisicing elit.
4. Support
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<section class="bg-body py-5">
<div class="container">
<div class="row align-items-center mb-5">
<div class="col-lg-6">
<h1 class="text-primary fw-semibold text-uppercase h5 mb-2">Our Process</h1>
<h2 class="mb-2">How We Do Things</h2>
<p class="text-muted mb-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusd libero
corpori digniss vident.
</p>
<button class="btn btn-lg btn-outline-secondary">Learn more<i class="ri-arrow-right-line ms-2"></i></button>
</div>
<div class="col-lg-5 offset-lg-1 mt-4 mt-lg-0">
<img src="https://placehold.co/540x540/31343C/EEE?text=Placeholder+Image" class="img-fluid rounded-4" alt="Process Image">
</div>
</div>
<div class="row g-3">
<div class="col-sm-6">
<div class="card bg-secondary shadow border-0 h-100">
<div class="card-body">
<i class="ri-treasure-map-fill text-primary display-6"></i>
<p class="card-title mt-3 mb-2">1. Planning</p>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card bg-secondary shadow border-0 h-100">
<div class="card-body">
<i class="ri-hammer-fill text-primary display-6"></i>
<p class="card-title mt-3 mb-2">2. Development</p>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card bg-secondary shadow border-0 h-100">
<div class="card-body">
<i class="ri-rocket-2-fill text-primary display-6"></i>
<p class="card-title mt-3 mb-2">3. Launch</p>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card bg-secondary shadow border-0 h-100">
<div class="card-body">
<i class="ri-hand-heart-fill text-primary display-6"></i>
<p class="card-title mt-3 mb-2">4. Support</p>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="row align-items-center mb-5"> <div class="col-lg-6"> <h1
class="text-primary fw-semibold text-uppercase h5 mb-2">Our Process</h1>
<h2 class="mb-2">How We Do Things</h2> <p class="text-muted
mb-3"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusd libero
corpori digniss vident. </p> <button class="btn btn-lg
btn-outline-secondary">Learn more<i class="ri-arrow-right-line
ms-2"></i></button> </div> <div class="col-lg-5 offset-lg-1
mt-4 mt-lg-0"> <img
src="https://placehold.co/540x540/31343C/EEE?text=Placeholder+Image"
class="img-fluid rounded-4" alt="Process Image"> </div>
</div> <div class="row g-3"> <div class="col-sm-6">
<div class="card bg-secondary shadow border-0 h-100"> <div
class="card-body"> <i class="ri-treasure-map-fill text-primary
display-6"></i> <p class="card-title mt-3 mb-2">1.
Planning</p> <p class="card-text">Lorem ipsum dolor sit amet consectetur
adipisicing elit.</p> </div> </div> </div> <div
class="col-sm-6"> <div class="card bg-secondary shadow border-0
h-100"> <div class="card-body"> <i class="ri-hammer-fill
text-primary display-6"></i> <p class="card-title mt-3 mb-2">2.
Development</p> <p class="card-text">Lorem ipsum dolor sit amet
consectetur adipisicing elit.</p> </div> </div> </div> <div
class="col-sm-6"> <div class="card bg-secondary shadow border-0
h-100"> <div class="card-body"> <i class="ri-rocket-2-fill
text-primary display-6"></i> <p class="card-title mt-3 mb-2">3.
Launch</p> <p class="card-text">Lorem ipsum dolor sit amet consectetur
adipisicing elit.</p> </div> </div> </div> <div
class="col-sm-6"> <div class="card bg-secondary shadow border-0
h-100"> <div class="card-body"> <i class="ri-hand-heart-fill
text-primary display-6"></i> <p class="card-title mt-3 mb-2">4.
Support</p> <p class="card-text">Lorem ipsum dolor sit amet consectetur
adipisicing elit.</p> </div> </div> </div> </div> </div>
</section>
Example 3
Our Process
Our Process, Step by Step
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusd libero corpori digniss vident.
1
Consultation
Lorem ipsum dolor sit amet consectetur adipisicing elit.
2
Development
Lorem ipsum dolor sit amet consectetur adipisicing elit.
3
Maintenance
Lorem ipsum dolor sit amet consectetur adipisicing elit.
<section class="bg-body py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-5">
<h1 class="text-primary fw-semibold text-uppercase fs-5 mb-2">Our Process</h1>
<h2 class="mb-2">Our Process, Step by Step</h2>
<p class="text-muted mb-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusd libero
corpori digniss vident.
</p>
<button class="btn btn-lg btn-outline-secondary">Learn more<i class="ri-arrow-right-line ms-2"></i></button>
</div>
<div class="col-lg-6 offset-lg-1 mt-4 mt-lg-0">
<div class="card bg-secondary shadow border-0 mb-3">
<div class="card-body d-flex gap-4">
<div class="rounded-circle text-bg-primary fw-semibold d-flex justify-content-center align-items-center flex-shrink-0"
style="width: 40px; height: 40px; font-size: 1rem; line-height: 1;">1</div>
<div>
<h5 class="mb-1">Consultation</h5>
<p class="mb-0 text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="card bg-secondary shadow border-0 mb-3">
<div class="card-body d-flex gap-4">
<div class="rounded-circle text-bg-primary fw-semibold d-flex justify-content-center align-items-center flex-shrink-0"
style="width: 40px; height: 40px; font-size: 1rem; line-height: 1;">2</div>
<div>
<h5 class="mb-1">Development</h5>
<p class="mb-0 text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
</div>
<div class="card bg-secondary shadow border-0">
<div class="card-body d-flex gap-4">
<div class="rounded-circle text-bg-primary fw-semibold d-flex justify-content-center align-items-center flex-shrink-0"
style="width: 40px; height: 40px; font-size: 1rem; line-height: 1;">3</div>
<div>
<h5 class="mb-1">Maintenance</h5>
<p class="mb-0 text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="row align-items-center"> <div class="col-lg-5"> <h1
class="text-primary fw-semibold text-uppercase fs-5 mb-2">Our Process</h1>
<h2 class="mb-2">Our Process, Step by Step</h2> <p
class="text-muted mb-3"> Lorem ipsum dolor sit amet consectetur adipisicing elit.
Dolorum quibusd libero corpori digniss vident. </p> <button class="btn btn-lg
btn-outline-secondary">Learn more<i class="ri-arrow-right-line
ms-2"></i></button> </div> <div class="col-lg-6 offset-lg-1
mt-4 mt-lg-0"> <div class="card bg-secondary shadow border-0 mb-3">
<div class="card-body d-flex gap-4"> <div class="rounded-circle
text-bg-primary fw-semibold d-flex justify-content-center align-items-center flex-shrink-0"
style="width: 40px; height: 40px; font-size: 1rem; line-height: 1;">1</div>
<div> <h5 class="mb-1">Consultation</h5> <p class="mb-0
text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div> </div> </div> <div class="card bg-secondary shadow border-0
mb-3"> <div class="card-body d-flex gap-4"> <div
class="rounded-circle text-bg-primary fw-semibold d-flex justify-content-center
align-items-center flex-shrink-0" style="width: 40px; height: 40px; font-size: 1rem;
line-height: 1;">2</div> <div> <h5
class="mb-1">Development</h5> <p class="mb-0
text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div> </div> </div> <div class="card bg-secondary shadow
border-0"> <div class="card-body d-flex gap-4"> <div
class="rounded-circle text-bg-primary fw-semibold d-flex justify-content-center
align-items-center flex-shrink-0" style="width: 40px; height: 40px; font-size: 1rem;
line-height: 1;">3</div> <div> <h5
class="mb-1">Maintenance</h5> <p class="mb-0
text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div> </div> </div> </div> </div> </div> </section>
Example 4
Here’s How It Works
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusd libero corpori digniss vident.
1
Consultation
2
Development
3
Launch
4
Support
<section class="bg-body py-5">
<div class="container text-center">
<h2 class="mb-2">Here’s How It Works</h2>
<p class="text-muted mb-4 mb-lg-5">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusd libero
corpori digniss vident.
</p>
<div class="process-wrapper">
<div class="process-step">
<div class="circle">1</div>
<div class="label">Consultation</div>
</div>
<div class="process-step">
<div class="circle">2</div>
<div class="label">Development</div>
</div>
<div class="process-step">
<div class="circle">3</div>
<div class="label">Launch</div>
</div>
<div class="process-step">
<div class="circle">4</div>
<div class="label">Support</div>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container
text-center"> <h2 class="mb-2">Here’s How It Works</h2> <p
class="text-muted mb-4 mb-lg-5"> Lorem ipsum dolor sit amet consectetur adipisicing
elit. Dolorum quibusd libero corpori digniss vident. </p> <div
class="process-wrapper"> <div class="process-step"> <div
class="circle">1</div> <div
class="label">Consultation</div> </div> <div
class="process-step"> <div class="circle">2</div> <div
class="label">Development</div> </div> <div
class="process-step"> <div class="circle">3</div> <div
class="label">Launch</div> </div> <div
class="process-step"> <div class="circle">4</div> <div
class="label">Support</div> </div> </div> </div>
</section>
Example 5
Our Process
How We Do Things
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident nemo.
<section class="bg-body py-5">
<div class="container">
<div class="row gy-2 mb-4">
<div class="col-lg-6">
<h1 class="text-primary fw-semibold text-uppercase fs-5">Our Process</h1>
<h2 class="mb-0">How We Do Things</h2>
</div>
<div class="col-lg-6">
<p class="text-muted mb-0">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum quibusdam, libero
corporis dignissimos provident nemo.
</p>
</div>
</div>
<div class="row g-2 g-lg-3">
<div class="col-sm-6 col-lg-3">
<div class="card border shadow h-100">
<div class="card-body d-flex flex-column">
<span class="display-6 fw-semibold text-primary">01.</span>
<p class="card-title my-2 pb-0 pb-md-5">Consultation</p>
<div class="mt-auto">
<p class="text-muted mt-0 mb-2">Lorem ipsum dolor sit amet consect adipis elit oloru.</p>
<a href="#" class="text-primary text-decoration-none">
Learn more <i class="ri-arrow-right-line"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="card border shadow h-100 mt-0 mt-md-4">
<div class="card-body d-flex flex-column">
<span class="display-6 fw-semibold text-primary">02.</span>
<p class="card-title my-2 pb-0 pb-md-5">Development</p>
<div class="mt-auto">
<p class="text-muted mt-0 mb-2">Lorem ipsum dolor sit amet consect adipis elit oloru.</p>
<a href="#" class="text-primary text-decoration-none">
Learn more <i class="ri-arrow-right-line"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="card bg-secondary shadow border h-100">
<div class="card-body d-flex flex-column">
<span class="display-6 fw-semibold text-primary">03.</span>
<p class="card-title my-2 pb-0 pb-md-5">Launch</p>
<div class="mt-auto">
<p class="text-muted mt-0 mb-2">Lorem ipsum dolor sit amet consect adipis elit oloru.</p>
<a href="#" class="text-primary text-decoration-none">
Learn more <i class="ri-arrow-right-line"></i>
</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<div class="card border shadow h-100 mt-0 mt-md-4">
<div class="card-body d-flex flex-column">
<span class="display-6 fw-semibold text-primary">04.</span>
<p class="card-title my-2 pb-0 pb-md-5">Support</p>
<div class="mt-auto">
<p class="text-muted mt-0 mb-2">Lorem ipsum dolor sit amet consect adipis elit oloru.</p>
<a href="#" class="text-primary text-decoration-none">
Learn more <i class="ri-arrow-right-line"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="row gy-2 mb-4"> <div class="col-lg-6"> <h1
class="text-primary fw-semibold text-uppercase fs-5">Our Process</h1> <h2
class="mb-0">How We Do Things</h2> </div> <div
class="col-lg-6"> <p class="text-muted mb-0"> Lorem ipsum dolor sit
amet consectetur adipisicing elit. Dolorum quibusdam, libero corporis dignissimos provident
nemo. </p> </div> </div> <div class="row g-2 g-lg-3"> <div
class="col-sm-6 col-lg-3"> <div class="card border shadow h-100">
<div class="card-body d-flex flex-column"> <span class="display-6
fw-semibold text-primary">01.</span> <p class="card-title my-2 pb-0
pb-md-5">Consultation</p> <div class="mt-auto"> <p
class="text-muted mt-0 mb-2">Lorem ipsum dolor sit amet consect adipis elit
oloru.</p> <a href="#" class="text-primary
text-decoration-none"> Learn more <i
class="ri-arrow-right-line"></i> </a> </div> </div>
</div> </div> <div class="col-sm-6 col-lg-3"> <div
class="card border shadow h-100 mt-0 mt-md-4"> <div class="card-body d-flex
flex-column"> <span class="display-6 fw-semibold
text-primary">02.</span> <p class="card-title my-2 pb-0
pb-md-5">Development</p> <div class="mt-auto"> <p
class="text-muted mt-0 mb-2">Lorem ipsum dolor sit amet consect adipis elit
oloru.</p> <a href="#" class="text-primary
text-decoration-none"> Learn more <i
class="ri-arrow-right-line"></i> </a> </div> </div>
</div> </div> <div class="col-sm-6 col-lg-3"> <div
class="card bg-secondary shadow border h-100"> <div class="card-body d-flex
flex-column"> <span class="display-6 fw-semibold
text-primary">03.</span> <p class="card-title my-2 pb-0
pb-md-5">Launch</p> <div class="mt-auto"> <p
class="text-muted mt-0 mb-2">Lorem ipsum dolor sit amet consect adipis elit
oloru.</p> <a href="#" class="text-primary
text-decoration-none"> Learn more <i
class="ri-arrow-right-line"></i> </a> </div> </div>
</div> </div> <div class="col-sm-6 col-lg-3"> <div
class="card border shadow h-100 mt-0 mt-md-4"> <div class="card-body d-flex
flex-column"> <span class="display-6 fw-semibold
text-primary">04.</span> <p class="card-title my-2 pb-0
pb-md-5">Support</p> <div class="mt-auto"> <p
class="text-muted mt-0 mb-2">Lorem ipsum dolor sit amet consect adipis elit
oloru.</p> <a href="#" class="text-primary
text-decoration-none"> Learn more <i
class="ri-arrow-right-line"></i> </a> </div> </div>
</div> </div> </div> </div> </section>
Example 6
Our Process
Our Process, Step by Step
01.
Consultation
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
02.
Design
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
03.
Development
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
04.
Launch
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
05.
Feedback
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
06.
Support
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<section class="bg-body py-5">
<div class="container">
<div class="text-center">
<h1 class="text-primary fw-semibold text-uppercase fs-5 mb-2">Our Process</h1>
<h2 class="mb-4">Our Process, Step by Step</h2>
</div>
<div class="row g-2 g-lg-3">
<div class="col-md-7">
<div class="card border shadow h-100">
<div class="card-body">
<span class="display-6 fw-semibold text-primary">01.</span>
<h5 class="card-title my-2">Consultation</h5>
<p class="text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="col-md-5">
<div class="card border shadow h-100">
<div class="card-body">
<span class="display-6 fw-semibold text-primary">02.</span>
<h5 class="card-title my-2">Design</h5>
<p class="text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="col-md-5">
<div class="card border shadow h-100">
<div class="card-body">
<span class="display-6 fw-semibold text-primary">03.</span>
<h5 class="card-title my-2">Development</h5>
<p class="text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="col-md-7">
<div class="card bg-secondary border shadow h-100">
<div class="card-body">
<span class="display-6 fw-semibold text-primary">04.</span>
<h5 class="card-title my-2">Launch</h5>
<p class="text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="col-md-7">
<div class="card border shadow h-100">
<div class="card-body">
<span class="display-6 fw-semibold text-primary">05.</span>
<h5 class="card-title my-2">Feedback</h5>
<p class="text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="col-md-5">
<div class="card border shadow h-100">
<div class="card-body">
<span class="display-6 fw-semibold text-primary">06.</span>
<h5 class="card-title my-2">Support</h5>
<p class="text-muted mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="bg-body py-5"> <div class="container"> <div
class="text-center"> <h1 class="text-primary fw-semibold text-uppercase
fs-5 mb-2">Our Process</h1> <h2 class="mb-4">Our Process, Step by
Step</h2> </div> <div class="row g-2 g-lg-3"> <div
class="col-md-7"> <div class="card border shadow h-100"> <div
class="card-body"> <span class="display-6 fw-semibold
text-primary">01.</span> <h5 class="card-title
my-2">Consultation</h5> <p class="text-muted mb-0">Lorem ipsum
dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </div>
<div class="col-md-5"> <div class="card border shadow h-100">
<div class="card-body"> <span class="display-6 fw-semibold
text-primary">02.</span> <h5 class="card-title
my-2">Design</h5> <p class="text-muted mb-0">Lorem ipsum dolor sit
amet, consectetur adipiscing elit.</p> </div> </div> </div> <div
class="col-md-5"> <div class="card border shadow h-100"> <div
class="card-body"> <span class="display-6 fw-semibold
text-primary">03.</span> <h5 class="card-title
my-2">Development</h5> <p class="text-muted mb-0">Lorem ipsum
dolor sit amet, consectetur adipiscing elit.</p> </div> </div> </div>
<div class="col-md-7"> <div class="card bg-secondary border shadow
h-100"> <div class="card-body"> <span class="display-6
fw-semibold text-primary">04.</span> <h5 class="card-title
my-2">Launch</h5> <p class="text-muted mb-0">Lorem ipsum dolor sit
amet, consectetur adipiscing elit.</p> </div> </div> </div> <div
class="col-md-7"> <div class="card border shadow h-100"> <div
class="card-body"> <span class="display-6 fw-semibold
text-primary">05.</span> <h5 class="card-title
my-2">Feedback</h5> <p class="text-muted mb-0">Lorem ipsum dolor
sit amet, consectetur adipiscing elit.</p> </div> </div> </div> <div
class="col-md-5"> <div class="card border shadow h-100"> <div
class="card-body"> <span class="display-6 fw-semibold
text-primary">06.</span> <h5 class="card-title
my-2">Support</h5> <p class="text-muted mb-0">Lorem ipsum dolor
sit amet, consectetur adipiscing elit.</p> </div> </div> </div>
</div> </div> </section>
ESC