<section class="py-20 bg-dark">
<div class="container">
<div class="d-flex flex-column flex-md-row align-items-center justify-content-center">
<div class="d-flex align-items-center">
<div class="d-inline-flex me-4 justify-content-center align-items-center rounded-pill bg-primary fs-9 fw-bold" style="width: 30px; height: 30px;">1</div>
<span class="fw-bold text-white">Shopping Cart</span>
</div>
<span class="my-4 my-md-0 mx-md-8 mx-lg-16">
<svg width="18" height="14" viewbox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.5" d="M10.6667 1.16669L16.5 7.00002M16.5 7.00002L10.6667 12.8334M16.5 7.00002L1.5 7.00002" stroke="#84878A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<div class="d-flex align-items-center">
<div class="d-inline-flex me-4 justify-content-center align-items-center rounded-pill bg-dark-light fs-9 fw-bold text-white" style="width: 30px; height: 30px;">2</div>
<span class="fw-bold text-white">Payment & Delivery Options</span>
</div>
<span class="my-4 my-md-0 mx-md-8 mx-lg-16">
<svg width="18" height="14" viewbox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.5" d="M10.6667 1.16669L16.5 7.00002M16.5 7.00002L10.6667 12.8334M16.5 7.00002L1.5 7.00002" stroke="#84878A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<div class="d-flex align-items-center">
<div class="d-inline-flex me-4 justify-content-center align-items-center rounded-pill bg-dark-light fs-9 fw-bold text-white" style="width: 30px; height: 30px;">3</div>
<span class="fw-bold text-white">Order Received</span>
</div>
</div>
</div>
</section>
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
