penguinui is now in the root dir in penguinui-components/
This commit is contained in:
36
penguinui-components/steps/steps-with-labels.html
Normal file
36
penguinui-components/steps/steps-with-labels.html
Normal file
@@ -0,0 +1,36 @@
|
||||
<ol class="flex w-full items-center gap-2" aria-label="registration progress">
|
||||
<!-- completed step -->
|
||||
<li class="text-sm" aria-label="create an account">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="flex size-6 items-center justify-center rounded-full border 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>
|
||||
<span class="hidden w-max text-primary dark:text-primary-dark sm:inline">Create an account</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 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>
|
||||
<span class="hidden w-max font-bold text-primary dark:text-primary-dark sm:inline">Select a plan</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 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>
|
||||
<span class="hidden w-max text-on-surface dark:text-on-surface-dark sm:inline">Checkout</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="flex w-full items-center text-sm" aria-label="start trial">
|
||||
<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 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>
|
||||
<span class="hidden w-max text-on-surface dark:text-on-surface-dark sm:inline">Get started</span>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
Reference in New Issue
Block a user