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'
---

<DefaultLayout title="Steps" pageHeader="Steps" pageMenu="base.steps">
  <div class="row row-cards">
    <div class="col-lg-8">
      <Card>
        <CardBody>
          <CardTitle>Steps horizontal</CardTitle>
          <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>
        <CardBody>
          <ul class="steps steps-green steps-counter my-4">
            <li class="step-item"></li>
            <li class="step-item active"></li>
            <li class="step-item"></li>
          </ul>
        </CardBody>
        <CardBody>
          <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>
        <CardBody>
          <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>
        <CardBody>
          <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>
        <CardBody>
          <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 class="col-lg-4">
      <Card>
        <CardBody>
          <CardTitle>Steps vertical</CardTitle>
          <ul class="steps steps-vertical">
            <li class="step-item">
              <div class="h4 m-0">Order received</div>
              <div class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus culpa cum expedita ipsam laborum nam ratione reprehenderit sed sint tenetur!</div>
            </li>
            <li class="step-item">
              <div class="h4 m-0">Order received</div>
              <div class="text-secondary">Lorem ipsum dolor sit amet.</div>
            </li>
            <li class="step-item active">
              <div class="h4 m-0">Out for delivery</div>
              <div class="text-secondary">Lorem ipsum dolor sit amet.</div>
            </li>
            <li class="step-item">
              <div class="h4 m-0">Finalized</div>
              <div class="text-secondary">Lorem ipsum dolor sit amet.</div>
            </li>
          </ul>
        </CardBody>
        <CardBody>
          <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>