Finder خرید قالب

نوار های پیشرفت (Progress step)

مجموعه ای از مراحل یا شرایطی که کاربر برای دستیابی به یک هدف باید انجام دهد.

کامپوننت سایت

Progress step خطی

1
اطلاعات پایه
2
جزئیات شرکت
3
جزئیات شغل
4
ثبت رزومه
<!-- Inline steps: Default -->
<div class="steps">
  <div class="step active">
    <div class="step-progress">
      <span class="step-progress-start"></span>
      <span class="step-progress-end"></span>
      <span class="step-number">1</span>
    </div>
    <div class="step-label">Basic info</div>
  </div>
  <div class="step active">
    <div class="step-progress">
      <span class="step-progress-start"></span>
      <span class="step-progress-end"></span>
      <span class="step-number">2</span>
    </div>
    <div class="step-label">Company details</div>
  </div>
  <div class="step">
    <div class="step-progress">
      <span class="step-progress-start"></span>
      <span class="step-progress-end"></span>
      <span class="step-number">3</span>
    </div>
    <div class="step-label">Job details</div>
  </div>
  <div class="step">
    <div class="step-progress">
      <span class="step-progress-start"></span>
      <span class="step-progress-end"></span>
      <span class="step-number">4</span>
    </div>
    <div class="step-label">Post a job</div>
  </div>
</div>
// Inline steps: Default
.steps
  .step.active
    .step-progress
      span.step-progress-start
      span.step-progress-end
      span.step-number 1
    .step-label Basic info
  .step.active
    .step-progress
      span.step-progress-start
      span.step-progress-end
      span.step-number 2
    .step-label Company details
  .step
    .step-progress
      span.step-progress-start
      span.step-progress-end
      span.step-number 3
    .step-label Job details
  .step
    .step-progress
      span.step-progress-start
      span.step-progress-end
      span.step-number 4
    .step-label Post a job

نسخه Light

1
اطلاعات پایه
2
جزئیات شرکت
3
جزئیات شغل
4
ثبت رزومه
<!-- Inline steps: Light version -->
<div class="steps steps-light">
  <div class="step active">
    <div class="step-progress">
      <span class="step-progress-start"></span>
      <span class="step-progress-end"></span>
      <span class="step-number">1</span>
    </div>
    <div class="step-label">Basic info</div>
  </div>
  <div class="step active">
    <div class="step-progress">
      <span class="step-progress-start"></span>
      <span class="step-progress-end"></span>
      <span class="step-number">2</span>
    </div>
    <div class="step-label">Company details</div>
  </div>
  <div class="step">
    <div class="step-progress">
      <span class="step-progress-start"></span>
      <span class="step-progress-end"></span>
      <span class="step-number">3</span>
    </div>
    <div class="step-label">Job details</div>
  </div>
  <div class="step">
    <div class="step-progress">
      <span class="step-progress-start"></span>
      <span class="step-progress-end"></span>
      <span class="step-number">4</span>
    </div>
    <div class="step-label">Post a job</div>
  </div>
</div>
// Inline steps: Light version
.steps.steps-light
  .step.active
    .step-progress
      span.step-progress-start
      span.step-progress-end
      span.step-number 1
    .step-label Basic info
  .step.active
    .step-progress
      span.step-progress-start
      span.step-progress-end
      span.step-number 2
    .step-label Company details
  .step
    .step-progress
      span.step-progress-start
      span.step-progress-end
      span.step-number 3
    .step-label Job details
  .step
    .step-progress
      span.step-progress-start
      span.step-progress-end
      span.step-number 4
    .step-label Post a job

مراحل بصورت باکسی (card)

01

ایجاد شغل تبلیغاتی

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

02

انتخاب پلن قیمت

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

03

ثبت رزومه

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. 

<!-- Card based steps -->
<div class="row gy-3">
  <div class="col-md-4">
    <div class="card card-hover card-body border-0">
      <div class="h2 text-primary mb-2 pb-1">01</div>
      <h3 class="h5 card-title">Create a Job Ad</h3>
      <p class="card-text fs-sm">In volutpat lacus orci volutpat nulla tristique eu. Ullamcorper in est lectus cras.</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card card-hover card-body border-0">
      <div class="h2 text-primary mb-2 pb-1">02</div>
      <h3 class="h5 card-title">Select a Pricing Plan</h3>
      <p class="card-text fs-sm">Cursus duis ridiculus purus eget velit mattis id vel. Semper aliquet auctor cras dui.</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card card-hover card-body border-0">
      <div class="h2 text-primary mb-2 pb-1">03</div>
      <h3 class="h5 card-title">Post Your Job</h3>
      <p class="card-text fs-sm">Sit auctor aliquam leo duis. Praesent ut penatibus faucibus nibh arcu tempor.</p>
    </div>
  </div>
</div>
// Card based steps
.row.gy-3
  .col-md-4
    .card.card-hover.card-body.border-0
      .h2.text-primary.mb-2.pb-1 01
      h3.h5.card-title Create a Job Ad
      p.card-text.fs-sm In volutpat lacus orci volutpat nulla tristique eu. Ullamcorper in est lectus cras.
  .col-md-4
    .card.card-hover.card-body.border-0
      .h2.text-primary.mb-2.pb-1 02
      h3.h5.card-title Select a Pricing Plan
      p.card-text.fs-sm Cursus duis ridiculus purus eget velit mattis id vel. Semper aliquet auctor cras dui.
  .col-md-4
    .card.card-hover.card-body.border-0
      .h2.text-primary.mb-2.pb-1 03
      h3.h5.card-title Post Your Job
      p.card-text.fs-sm Sit auctor aliquam leo duis. Praesent ut penatibus faucibus nibh arcu tempor.

نسخه Light

01

ایجاد شغل تبلیغاتی

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

02

انتخاب پلن قیمت

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.

03

ثبت روزمه

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. 

<!-- Card based steps: Light version -->
<div class="row gy-3">
  <div class="col-md-4">
    <div class="card card-light card-hover card-body bg-transparent">
      <div class="h2 text-primary mb-2 pb-1">01</div>
      <h3 class="h5 card-title">Create a Job Ad</h3>
      <p class="card-text fs-sm opacity-60">In volutpat lacus orci volutpat nulla tristique eu. Ullamcorper in est lectus cras.</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card card-light card-hover card-body bg-transparent">
      <div class="h2 text-primary mb-2 pb-1">02</div>
      <h3 class="h5 card-title">Select a Pricing Plan</h3>
      <p class="card-text fs-sm opacity-60">Cursus duis ridiculus purus eget velit mattis id vel. Semper aliquet auctor cras dui.</p>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card card-light card-hover card-body bg-transparent">
      <div class="h2 text-primary mb-2 pb-1">03</div>
      <h3 class="h5 card-title">Post Your Job</h3>
      <p class="card-text fs-sm opacity-60">Sit auctor aliquam leo duis. Praesent ut penatibus faucibus nibh arcu tempor.</p>
    </div>
  </div>
</div>
// Card based steps: Light version
.row.gy-3
  .col-md-4
    .card.card-light.card-hover.card-body.bg-transparent
      .h2.text-primary.mb-2.pb-1 01
      h3.h5.card-title Create a Job Ad
      p.card-text.fs-sm.opacity-60 In volutpat lacus orci volutpat nulla tristique eu. Ullamcorper in est lectus cras.
  .col-md-4
    .card.card-light.card-hover.card-body.bg-transparent
      .h2.text-primary.mb-2.pb-1 02
      h3.h5.card-title Select a Pricing Plan
      p.card-text.fs-sm.opacity-60 Cursus duis ridiculus purus eget velit mattis id vel. Semper aliquet auctor cras dui.
  .col-md-4
    .card.card-light.card-hover.card-body.bg-transparent
      .h2.text-primary.mb-2.pb-1 03
      h3.h5.card-title Post Your Job
      p.card-text.fs-sm.opacity-60 Sit auctor aliquam leo duis. Praesent ut penatibus faucibus nibh arcu tempor.
بالا