- var theme_customizer = true;
- var tooltip = true;
doctype html
html(lang='en')
include ../../components/header-files
body
include ../../components/loader
// page-wrapper Start
#pageWrapper.page-wrapper
include ../../components/header
// Page Body Start
.page-body-wrapper.horizontal-menu
include ../../components/sidebar
.page-body
.container-fluid
.page-header
.row
.col-sm-6
h3
| Steps
ol.breadcrumb
li.breadcrumb-item
a(href='index.html')
| Home
li.breadcrumb-item Advance
li.breadcrumb-item.active Steps
.col-sm-6
include ../../components/bookmark
// Container-fluid starts
.container-fluid
.row
// basic u-steps
.col-sm-12
.card
.card-header.pb-0
h5 Default Step
.card-body
.u-steps.row
.u-step.col-sm-4
span.u-step-number 1
.u-step-desc
span.u-step-title Shopping
p Choose what you want
.u-step.col-sm-4.current
span.u-step-number 2
.u-step-desc
span.u-step-title Billing
p Pay for the bill
.u-step.col-sm-4
span.u-step-number 3
.u-step-desc
span.u-step-title Getting
p Waiting for the goods
// u-step with icon
.col-sm-12
.card
.card-header.pb-0
h5 Step with icon
.card-body
.u-steps.row
.u-step.col-md-4
span.u-step-icon.icon-shopping-cart-full(aria-hidden='true')
.u-step-desc
span.u-step-title Shopping
.u-step.col-md-4.current
span.u-step-icon.icon-notepad(aria-hidden='true')
.u-step-desc
span.u-step-title Billing
.u-step.col-md-4
span.u-step-icon.icon-time(aria-hidden='true')
.u-step-desc
span.u-step-title Getting
// u-step with icon
.col-sm-12
.card
.card-header.pb-0
h5 Step States
span
| A u-step with classname
code .done
| A u-step with classname
code .error
| A u-step with classname
code .current
| A u-step with classname
code .disabled
.card-body
.row.row-lg
.col-xl-3.col-lg-6
.u-step.done.bg-primary
span.u-step-number.txt-primary 1
.u-step-desc
span.u-step-title Getting
p.text-light Waiting for the goods
.col-xl-3.col-lg-6.steps-md-mt
.u-step.error.bg-secondary
span.u-step-number.txt-secondary 2
.u-step-desc
span.u-step-title Getting
p.text-light Waiting for the goods
.col-xl-3.col-lg-6.lg-mt
.u-step.current.bg-success
span.u-step-number.txt-success 3
.u-step-desc
span.u-step-title Getting
p Waiting for the goods
.col-xl-3.col-lg-6.lg-mt
.u-step.disabled
span.u-step-number 4
.u-step-desc
span.u-step-title Getting
p Waiting for the goods
// u-step with icon
.col-sm-12
.card
.card-header.pb-0
h5 Step Sizing
span
| A step with classname
code .u-steps-xs
code .u-steps-sm
code .u-steps-lg
.card-body
.u-steps.row.u-steps-xs.steps-sizing-sm-mb
.u-step.col-md-4
span.u-step-icon.icon.wb-shopping-cart(aria-hidden='true')
.u-step-desc
span.u-step-title Shopping
.u-step.col-md-4.current
span.u-step-icon.icon.wb-pluse(aria-hidden='true')
.u-step-desc
span.u-step-title Billing
.u-step.col-md-4
span.u-step-icon.icon.wb-time(aria-hidden='true')
.u-step-desc
span.u-step-title Getting
.u-steps.row.u-steps-sm.steps-sizing-sm-mb
.u-step.col-md-4
span.u-step-icon.icon.wb-shopping-cart(aria-hidden='true')
.u-step-desc
span.u-step-title Shopping
.u-step.col-md-4.current
span.u-step-icon.icon.wb-pluse(aria-hidden='true')
.u-step-desc
span.u-step-title Billing
.u-step.col-md-4
span.u-step-icon.icon.wb-time(aria-hidden='true')
.u-step-desc
span.u-step-title Getting
.u-steps.row.steps-sizing-sm-mb
.u-step.col-md-4
span.u-step-icon.icon.wb-shopping-cart(aria-hidden='true')
.u-step-desc
span.u-step-title Shopping
.u-step.col-md-4.current
span.u-step-icon.icon.wb-pluse(aria-hidden='true')
.u-step-desc
span.u-step-title Billing
.u-step.col-md-4
span.u-step-icon.icon.wb-time(aria-hidden='true')
.u-step-desc
span.u-step-title Getting
.u-steps.row.u-steps-lg
.u-step.col-md-4
span.u-step-icon.icon.wb-shopping-cart(aria-hidden='true')
.u-step-desc
span.u-step-title Shopping
.u-step.col-md-4.current
span.u-step-icon.icon.wb-pluse(aria-hidden='true')
.u-step-desc
span.u-step-title Billing
.u-step.col-md-4
span.u-step-icon.icon.wb-time(aria-hidden='true')
.u-step-desc
span.u-step-title Getting
.col-sm-12
.card
.card-header.pb-0
h5 Vertical Step
.card-body
.row
.col-lg-4
.u-steps.u-steps-vertical
.u-step
span.u-step-number 1
.u-step-desc
span.u-step-title Shopping
p Choose what you want
.u-step.current
span.u-step-number 2
.u-step-desc
span.u-step-title Billing
p Pay for the bill
.u-step
span.u-step-number 3
.u-step-desc
span.u-step-title Getting
p Waiting for the goods
.col-sm-12
.card
.card-header.pb-0
h5 Default Pearls Steps
.card-body
.row
.u-pearl.done.col-4
span.u-pearl-number 1
span.u-pearl-title Account Info
.u-pearl.current.col-4
span.u-pearl-number 2
span.u-pearl-title Billing Info
.u-pearl.col-4
span.u-pearl-number 3
span.u-pearl-title Confirmation
.col-sm-12
.card
.card-header.pb-0
h5 Pearls Steps with icon
.card-body
.row
.u-pearl.done.col-4
.u-pearl-icon
i.icon-shopping-cart(aria-hidden='true')
span.u-pearl-title Account Info
.u-pearl.current.col-4
.u-pearl-icon
i.icon-write(aria-hidden='true')
span.u-pearl-title Billing Info
.u-pearl.col-4
.u-pearl-icon
i.icon-check(aria-hidden='true')
span.u-pearl-title Confirmation
.col-sm-12
.card
.card-header.pb-0
h5 Pearls Step Sizing
span
| A Pearls step with classname
code .u-pearls-xs
code .u-pearls-sm
code .u-pearls-lg
.card-body
.u-pearls-xs.row.mb-5
.u-pearl.done.col-4
span.u-pearl-number 1
span.u-pearl-title Account Info
.u-pearl.current.col-4
span.u-pearl-number 2
span.u-pearl-title Billing Info
.u-pearl.col-4
span.u-pearl-number 3
span.u-pearl-title Confirmation
.u-pearls-sm.row.mb-5
.u-pearl.done.col-4
span.u-pearl-number 1
span.u-pearl-title Account Info
.u-pearl.current.col-4
span.u-pearl-number 2
span.u-pearl-title Billing Info
.u-pearl.col-4
span.u-pearl-number 3
span.u-pearl-title Confirmation
.row.mb-5
.u-pearl.done.col-4
span.u-pearl-number 1
span.u-pearl-title Account Info
.u-pearl.current.col-4
span.u-pearl-number 2
span.u-pearl-title Billing Info
.u-pearl.col-4
span.u-pearl-number 3
span.u-pearl-title Confirmation
.u-pearls-lg.row
.u-pearl.done.col-4
span.u-pearl-number 1
span.u-pearl-title Account Info
.u-pearl.current.col-4
span.u-pearl-number 2
span.u-pearl-title Billing Info
.u-pearl.col-4
span.u-pearl-number 3
span.u-pearl-title Confirmation
// u-step with icon
.col-sm-12
.card
.card-header.pb-0
h5 Pearls Step States
span
| A pearls step states with different class
code .done
code .currunt
code .error
code .disabled
.card-body
.row.mb-5
.u-pearl.current.col-4
.u-pearl-icon 1
span.u-pearl-title Account Info
.u-pearl.disabled.col-4
.u-pearl-icon 2
span.u-pearl-title Billing Info
.u-pearl.disabled.col-4
.u-pearl-icon 3
span.u-pearl-title Confirmation
.row.mb-5
.u-pearl.done.col-4
.u-pearl-icon 1
span.u-pearl-title Account Info
.u-pearl.current.col-4
.u-pearl-icon 2
span.u-pearl-title Billing Info
.u-pearl.disabled.col-4
.u-pearl-icon 3
span.u-pearl-title Confirmation
.row.mb-5
.u-pearl.done.col-4
.u-pearl-icon 1
span.u-pearl-title Account Info
.u-pearl.current.error.col-4
.u-pearl-icon 2
span.u-pearl-title Billing Info
.u-pearl.disabled.col-4
.u-pearl-icon 3
span.u-pearl-title Confirmation
.row
.u-pearl.done.col-4
.u-pearl-icon 1
span.u-pearl-title Account Info
.u-pearl.done.col-4
.u-pearl-icon 2
span.u-pearl-title Billing Info
.u-pearl.current.col-4
.u-pearl-icon 3
span.u-pearl-title Confirmation
// Container-fluid Ends
include ../../components/footer
include ../../components/footer-files