33 lines
2.1 KiB
HTML
33 lines
2.1 KiB
HTML
<ol class="flex w-full items-center gap-2" aria-label="registration progress">
|
|
<!-- completed step -->
|
|
<li class="text-sm">
|
|
<div class="flex items-center gap-2" aria-label="create an account">
|
|
<span class="flex size-6 items-center justify-center rounded-full border-primary bg-primary text-on-primary dark:border-primary-dark dark:bg-primary-dark dark:text-on-primary-dark">
|
|
<svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" aria-hidden="true">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/>
|
|
</svg>
|
|
<span class="sr-only">completed</span>
|
|
</span>
|
|
</div>
|
|
</li>
|
|
<!-- current step -->
|
|
<li class="flex w-full items-center text-sm" aria-current="step" aria-label="choose a plan">
|
|
<span class="h-0.5 w-full bg-primary dark:bg-primary-dark" aria-hidden="true"></span>
|
|
<div class="flex items-center gap-2 pl-2">
|
|
<span class="flex size-6 shrink-0 items-center justify-center rounded-full border-primary bg-primary font-bold text-on-primary outline outline-2 outline-offset-2 outline-primary dark:border-primary-dark dark:bg-primary-dark dark:text-on-primary-dark dark:outline-primary-dark">2</span>
|
|
</div>
|
|
</li>
|
|
<li class="flex w-full items-center text-sm" aria-label="checkout">
|
|
<span class="h-0.5 w-full bg-outline dark:bg-outline-dark" aria-hidden="true"></span>
|
|
<div class="flex items-center gap-2 pl-2">
|
|
<span class="flex size-6 shrink-0 items-center justify-center rounded-full border-outline bg-surface-alt font-medium text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">3</span>
|
|
</div>
|
|
</li>
|
|
<li aria-label="start trial" class="flex w-full items-center text-sm">
|
|
<span aria-hidden="true" class="h-0.5 w-full bg-outline dark:bg-outline-dark"></span>
|
|
<div class="flex items-center gap-2 pl-2">
|
|
<span class="flex size-6 shrink-0 items-center justify-center rounded-full border-outline bg-surface-alt font-medium text-on-surface dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark">4</span>
|
|
</div>
|
|
</li>
|
|
</ol>
|