mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
97 lines
3.3 KiB
HTML
97 lines
3.3 KiB
HTML
---
|
|
title: Steps
|
|
page-header: Steps
|
|
page-menu: base.steps
|
|
layout: default
|
|
permalink: steps.html
|
|
---
|
|
|
|
<div class="row row-cards">
|
|
<div class="col-lg-8">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h3 class="card-title">Steps horizontal</h3>
|
|
<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>
|
|
</div>
|
|
<div class="card-body">
|
|
<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>
|
|
</div>
|
|
<div class="card-body">
|
|
<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>
|
|
</div>
|
|
<div class="card-body">
|
|
<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>
|
|
</div>
|
|
<div class="card-body">
|
|
<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>
|
|
</div>
|
|
<div class="card-body">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h3 class="card-title">Steps vertical</h3>
|
|
<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>
|
|
</div>
|
|
<div class="card-body">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |