Steppers
Multi-step progress indicator used in create flows (e.g. create quote). Shows completed, active, and pending states with animated connectors. Collapses to a compact label on mobile.
Interactive stepper
Navigate between steps using Back/Next buttons. Completed steps show a green check, the active step has a brand-coloured bounce animation, and pending steps are gray.
Step of
-
Property
details -
Contact
info -
Review
-
Complete
<ol class="flex items-start">
@for (var i = 0; i < Model.Steps.Count; i++)
{
var stepNumber = i + 1;
var step = Model.Steps[i];
var isCompleted = stepNumber < Model.CurrentStep;
var isActive = stepNumber == Model.CurrentStep;
var isLast = i == Model.Steps.Count - 1;
<li class="flex items-start @(!isLast ? "w-full" : "")">
<div class="flex flex-col items-center">
@if (isCompleted)
{
<span class="flex items-center justify-center w-12 h-12 bg-brand
border-2 border-brand rounded-full lg:h-14 lg:w-14 shrink-0">
<!-- Check SVG -->
</span>
}
else
{
<span class="flex items-center justify-center w-12 h-12 rounded-full
lg:h-14 lg:w-14 shrink-0 border-2
@(isActive
? "border-brand bg-brand-soft animate-subtle-bounce"
: "border-gray-200 dark:border-gray-600
bg-gray-100 dark:bg-gray-700")">
<div class="flex items-center gap-0.5
@(isActive
? "text-brand dark:text-white"
: "text-gray-300 dark:text-gray-400")">
@Html.Raw(step.IconHtml)
</div>
</span>
}
<span class="mt-2 text-sm dark:text-white text-center
@(isActive ? "font-medium" : "")">
@Html.Raw(step.Label)
</span>
</div>
<div class="grow h-0.5 mt-6 lg:mt-7 @(!isLast ? "mx-4" : "")
@(stepNumber < Model.CurrentStep
? "bg-brand"
: "bg-gray-200 dark:bg-gray-600")
rounded-full"></div>
</li>
}
</ol>
Step states
Each step has three possible states: completed, active, and pending.
<!-- Completed: green check on brand background -->
<span class="flex items-center justify-center w-12 h-12
bg-brand border-2 border-brand rounded-full
lg:h-14 lg:w-14 shrink-0">
<svg class="w-6 h-6 text-white" ...>
<path d="M5 11.917 9.724 16.5 19 7.5"></path>
</svg>
</span>
<!-- Active: brand border + bounce animation -->
<span class="flex items-center justify-center w-12 h-12
rounded-full lg:h-14 lg:w-14 shrink-0 border-2
border-brand bg-brand-soft animate-subtle-bounce">
<div class="text-brand dark:text-white">
<!-- Step icon -->
</div>
</span>
<!-- Pending: gray border, no animation -->
<span class="flex items-center justify-center w-12 h-12
rounded-full lg:h-14 lg:w-14 shrink-0 border-2
border-gray-200 dark:border-gray-600
bg-gray-100 dark:bg-gray-700">
<div class="text-gray-300 dark:text-gray-400">
<!-- Step icon -->
</div>
</span>
Progress connectors
Horizontal lines between steps use brand colour for completed segments and gray for pending.
The connector is positioned with mt-6 lg:mt-7
to align with the centre of the step circles.
<!-- Connector between steps -->
<div class="grow h-0.5 mt-6 lg:mt-7 mx-4
@(stepNumber < Model.CurrentStep
? "bg-brand"
: "bg-gray-200 dark:bg-gray-600")
rounded-full">
</div>
Mobile view
On small screens, the full stepper is hidden and replaced with a compact text indicator.
The stepper uses hidden sm:flex
and the mobile label uses sm:hidden.
Step 2 of 4
<!-- Mobile: compact text -->
<p class="sm:hidden text-sm font-medium text-gray-500 dark:text-gray-400">
Step @Model.CurrentStep of @Model.Steps.Count
</p>
<!-- Desktop: full stepper -->
<ol class="hidden sm:flex items-start">
...
</ol>