tabler/preview/pages/steps.astro

---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
import CardSubtitle from '@ui/CardSubtitle.astro'
import DocsLink from '@ui/DocsLink.astro'
import Steps from '@ui/Steps.astro'
---

<DefaultLayout title="Steps" pageMenu="base.steps" description="Steps show progress through a numbered or labeled sequence, as a horizontal bar, breadcrumb, or vertical timeline.">
  <DocsLink slot="page-header-actions" path="/ui/components/step" />

  <div class="row row-cards mb-5">
    <div class="col-12">
      <Card>
        <CardBody>
          <CardTitle>Horizontal</CardTitle>
          <CardSubtitle>Numbered steps for a linear process, with the current step highlighted.</CardSubtitle>
          <ul class="steps steps-green my-4">
            <li class="step-item">1</li>
            <li class="step-item active">2</li>
            <li class="step-item">3</li>
          </ul>
        </CardBody>
      </Card>
    </div>
    <div class="col-12">
      <Card>
        <CardBody>
          <CardTitle>Horizontal counter</CardTitle>
          <CardSubtitle>The same steps without numbers, for a more minimal look.</CardSubtitle>
          <Steps count={3} active={2} numbers color="green" class="my-4" />
        </CardBody>
      </Card>
    </div>
    <div class="col-12">
      <Card>
        <CardBody>
          <CardTitle>With labels</CardTitle>
          <CardSubtitle>Give each step a title instead of a number.</CardSubtitle>
          <ul class="steps steps-green steps-counter my-4">
            <li class="step-item">Cart</li>
            <li class="step-item active">Billing Information</li>
            <li class="step-item">Confirmation</li>
          </ul>
        </CardBody>
      </Card>
    </div>
    <div class="col-12">
      <Card>
        <CardBody>
          <CardTitle>Breadcrumb arrows</CardTitle>
          <CardSubtitle>Chevron-style steps, useful for wizards and checkouts.</CardSubtitle>
          <ol class="breadcrumb breadcrumb-arrows">
            <li class="breadcrumb-item"><a href="#">Step one</a></li>
            <li class="breadcrumb-item active"><a href="#">Step two</a></li>
            <li class="breadcrumb-item disabled"><a href="#">Step three</a></li>
            <li class="breadcrumb-item disabled"><a href="#">Step four</a></li>
          </ol>
        </CardBody>
      </Card>
    </div>
    <div class="col-12">
      <Card>
        <CardBody>
          <CardTitle>Breadcrumb numbered</CardTitle>
          <CardSubtitle>Number each step and mute the ones not yet reached.</CardSubtitle>
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">1. Step one</a></li>
            <li class="breadcrumb-item"><a href="#">2. Step two</a></li>
            <li class="breadcrumb-item active"><a href="#">3. Step three</a></li>
            <li class="breadcrumb-item disabled"><a href="#">4. Step four</a></li>
            <li class="breadcrumb-item disabled"><a href="#">5. Step five</a></li>
          </ol>
        </CardBody>
      </Card>
    </div>
    <div class="col-12">
      <Card>
        <CardBody>
          <CardTitle>Breadcrumb muted</CardTitle>
          <CardSubtitle>A quieter style for steps that shouldn't compete with the rest of the page.</CardSubtitle>
          <ol class="breadcrumb breadcrumb-muted">
            <li class="breadcrumb-item"><a href="#">1. Step one</a></li>
            <li class="breadcrumb-item"><a href="#">2. Step two</a></li>
            <li class="breadcrumb-item active"><a href="#">3. Step three</a></li>
            <li class="breadcrumb-item disabled"><a href="#">4. Step four</a></li>
            <li class="breadcrumb-item disabled"><a href="#">5. Step five</a></li>
          </ol>
        </CardBody>
      </Card>
    </div>
  </div>

  <div class="row row-cards">
    <div class="col-md-6">
      <Card>
        <CardBody>
          <CardTitle>Vertical</CardTitle>
          <CardSubtitle>A title and description per step, for a detailed timeline.</CardSubtitle>
          <ul class="steps steps-vertical">
            <li class="step-item">
              <div class="h4 m-0">Order received</div>
              <div class="text-secondary">The order was placed and payment was confirmed. A confirmation email is on its way.</div>
            </li>
            <li class="step-item">
              <div class="h4 m-0">Preparing</div>
              <div class="text-secondary">The warehouse picked and packed the items.</div>
            </li>
            <li class="step-item active">
              <div class="h4 m-0">Out for delivery</div>
              <div class="text-secondary">The courier has the package and is on the way.</div>
            </li>
            <li class="step-item">
              <div class="h4 m-0">Delivered</div>
              <div class="text-secondary">Signed for at the delivery address.</div>
            </li>
          </ul>
        </CardBody>
      </Card>
    </div>
    <div class="col-md-6">
      <Card>
        <CardBody>
          <CardTitle>Vertical counter</CardTitle>
          <CardSubtitle>Numbered steps in a vertical list, without descriptions.</CardSubtitle>
          <ul class="steps steps-counter steps-vertical">
            <li class="step-item">Step one</li>
            <li class="step-item">Step two</li>
            <li class="step-item active">Step three</li>
            <li class="step-item">Step four</li>
            <li class="step-item">Step five</li>
          </ul>
        </CardBody>
      </Card>
    </div>
  </div>
</DefaultLayout>