Vertical Steppers
Vertical progress steppers with icons and lines.
Basic Vertical Stepper
Account Created
Your profile has been set up.
2
Verify Email
Check your inbox for a confirmation link.
3
Complete Profile
Add your personal details.
<div class="uk-vstep">
<div class="uk-vstep-item done">
<div class="uk-vstep-marker"><i class="fas fa-check"></i></div>
<div class="uk-vstep-content">
<div class="uk-vstep-title">Account Created</div>
<div class="uk-vstep-desc">Your profile has been set up.</div>
</div>
</div>
<div class="uk-vstep-item active">
<div class="uk-vstep-marker">2</div>
<div class="uk-vstep-content">
<div class="uk-vstep-title">Verify Email</div>
<div class="uk-vstep-desc">Check your inbox.</div>
</div>
</div>
<div class="uk-vstep-item">
<div class="uk-vstep-marker">3</div>
<div class="uk-vstep-content">
<div class="uk-vstep-title">Complete Profile</div>
<div class="uk-vstep-desc">Add your details.</div>
</div>
</div>
</div>
<style>
.uk-vstep { position: relative; padding-left: 0; text-align: left; }
.uk-vstep-item { display: flex; gap: 1rem; padding-bottom: 2rem; position: relative; }
.uk-vstep-item:last-child { padding-bottom: 0; }
.uk-vstep-marker {
width: 32px; height: 32px;
border-radius: 50%;
background: #e2e8f0;
color: #64748b;
display: flex; align-items: center; justify-content: center;
font-size: 0.85rem;
font-weight: 700;
flex-shrink: 0;
z-index: 2;
}
.uk-vstep-item.active .uk-vstep-marker {
background: #1e3a8a; color: #fff;
box-shadow: 0 0 0 4px rgba(30,58,138,0.15);
}
.uk-vstep-item.done .uk-vstep-marker {
background: #059669; color: #fff;
}
/* Line connecting markers */
.uk-vstep-item:not(:last-child)::after {
content: '';
position: absolute;
left: 15px; top: 32px; bottom: 0;
width: 2px;
background: #e2e8f0;
z-index: 1;
}
.uk-vstep-item.done:not(:last-child)::after {
background: #059669;
}
.uk-vstep-content { padding-top: 4px; }
.uk-vstep-title {
font-size: 0.9rem;
font-weight: 700;
color: #0b1b2f;
margin-bottom: 0.25rem;
}
.uk-vstep-desc {
font-size: 0.8rem;
color: #64748b;
line-height: 1.5;
}
</style>
Vertical Stepper with Icons
Order Placed
Mar 12, 2025 · 10:42 AM
Packed
Mar 13, 2025 · 2:15 PM
Shipped
In transit to your address.
Delivered
Expected Mar 15.
<div class="uk-vstep">
<div class="uk-vstep-item done">
<div class="uk-vstep-marker"><i class="fas fa-shopping-cart"></i></div>
<div class="uk-vstep-content">
<div class="uk-vstep-title">Order Placed</div>
<div class="uk-vstep-desc">Mar 12, 2025</div>
</div>
</div>
<!-- Add more steps here -->
</div>
<style>
.uk-vstep-marker {
width: 36px; height: 36px; /* Slightly larger for icons */
font-size: 0.9rem; /* Icon size */
}
.uk-vstep-item:not(:last-child)::after {
left: 17px; /* Adjust line center for larger marker */
top: 36px;
}
</style>
Stepper with Active Content Box
Personal Info
2
Shipping Details
Name
Marcus Johnson
Address
123 Market St, SF
3
Payment
<div class="uk-vstep-item active">
<div class="uk-vstep-marker">2</div>
<div class="uk-vstep-content">
<div class="uk-vstep-title">Shipping Details</div>
<div class="uk-vstep-box">
<div class="uk-vstep-box-row">
<span>Name</span> <strong>Marcus Johnson</strong>
</div>
<div class="uk-vstep-box-row">
<span>Address</span> <strong>123 Market St, SF</strong>
</div>
</div>
</div>
</div>
<style>
.uk-vstep-box {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 0.65rem;
padding: 1rem;
margin-top: 0.75rem;
}
.uk-vstep-box-row {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
color: #475569;
padding: 0.25rem 0;
}
.uk-vstep-box-row strong { color: #0b1b2f; }
</style>
Colored Vertical Steps
Step One
Completed successfully.
Step Two
Completed successfully.
3
Step Three
In progress...
<div class="uk-vstep uk-vstep-colored">
<div class="uk-vstep-item color-blue done">
<div class="uk-vstep-marker"><i class="fas fa-check"></i></div>
...
</div>
<div class="uk-vstep-item color-orange active">
<div class="uk-vstep-marker">3</div>
...
</div>
</div>
<style>
/* Specific colors for line and marker */
.uk-vstep-item.color-blue.done .uk-vstep-marker { background: #1e40af; }
.uk-vstep-item.color-blue.done::after { background: #1e40af; }
.uk-vstep-item.color-green.done .uk-vstep-marker { background: #059669; }
.uk-vstep-item.color-green.done::after { background: #059669; }
.uk-vstep-item.color-orange.active .uk-vstep-marker {
background: #d97706;
box-shadow: 0 0 0 4px rgba(217,119,6,0.15);
}
</style>
Minimal Vertical Stepper
Data uploaded
Validation passed
Processing data
Complete
<div class="uk-vstep uk-vstep-minimal">
<div class="uk-vstep-item done">
<div class="uk-vstep-marker"></div>
<div class="uk-vstep-content">
<div class="uk-vstep-title">Data uploaded</div>
</div>
</div>
<!-- ... -->
</div>
<style>
.uk-vstep-minimal .uk-vstep-marker {
width: 12px; height: 12px;
background: #e2e8f0;
margin-top: 6px;
}
.uk-vstep-minimal .uk-vstep-item:not(:last-child)::after {
left: 5px; /* Center line with smaller dot */
top: 18px;
}
.uk-vstep-minimal .uk-vstep-title {
font-size: 0.85rem;
color: #64748b;
font-weight: 500;
margin: 0;
}
.uk-vstep-minimal .uk-vstep-item.active .uk-vstep-title {
color: #1e3a8a;
font-weight: 700;
}
.uk-vstep-minimal .uk-vstep-item.done .uk-vstep-title {
color: #0b1b2f;
}
</style>