Plans

Plans 是一個提供不同方案選擇的組件。相關元件將以 .plan-為開頭,可使用 .plans 作為外層容器。每一個單一的 Plan 預設寬度為 100%,可搭配 Grid 使用。

預設樣式

每一個單一的組件為 .plan-card。由四個容器組合,分別為 .plan-header , .plan-main , .plan-detail 以及 .plan-footer

預設樣式

  • .plan-header 可以用來放置名稱與標語。
  • .plan-main 可以用來放置銷售訊息。
  • .plan-detail 可以用來放置內容描述。
  • .plan-footer 可以用來放置按鈕或是其他元件。

Standard

Lorem ipsum dolor sit amet.
NTD 149 / month
5% Transaction Fee per Order
  • Detail Item
  • Detail Item
  • Detail Item

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, quisquam.

<div class="plans">
    <div class="plan-card">
        <span class="ribbon-flag"></span>
        <div class="plan-header">
            <h4 class="plan-header-title">Standard</h4>
            <div class="plan-header-note">Lorem ipsum dolor sit amet.</div>
        </div>
        <div class="plan-main">
            <div class="plan-price">
                NTD <strong class="price">149</strong> / month
            </div>
            <div class="plan-main-text">5% Transaction Fee per Order</div>
        </div>
        <div class="plan-detail">
            <ul class="plan-detail-list">
                <li class="plan-detail-item">Detail Item</li>
                <li class="plan-detail-item">Detail Item</li>
                <li class="plan-detail-item">Detail Item</li>
            </ul>
            <p class="plan-detail-text">~略~</p>
        </div>
        <div class="plan-footer">
            <a class="btn-outline">Signin</a>
        </div>
    </div>
</div>

設定顏色

Plan 可透過 .color-* 來設定顏色

Standard

Lorem ipsum dolor sit amet.
NTD 149 / month
5% Transaction Fee per Order
  • Detail Item
  • Detail Item
  • Detail Item

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, ex.

Standard

Lorem ipsum dolor sit amet.
NTD 149 / month
5% Transaction Fee per Order
  • Detail Item
  • Detail Item
  • Detail Item

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, ex.

Standard

Lorem ipsum dolor sit amet.
NTD 149 / month
5% Transaction Fee per Order
  • Detail Item
  • Detail Item
  • Detail Item

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, ex.

Standard

Lorem ipsum dolor sit amet.
NTD 149 / month
5% Transaction Fee per Order
  • Detail Item
  • Detail Item
  • Detail Item

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, ex.

Standard

Lorem ipsum dolor sit amet.
NTD 149 / month
5% Transaction Fee per Order
  • Detail Item
  • Detail Item
  • Detail Item

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, ex.

Standard

Lorem ipsum dolor sit amet.
NTD 149 / month
5% Transaction Fee per Order
  • Detail Item
  • Detail Item
  • Detail Item

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, ex.

Standard

Lorem ipsum dolor sit amet.
NTD 149 / month
5% Transaction Fee per Order
  • Detail Item
  • Detail Item
  • Detail Item

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, ex.

<div class="plans">
    <div class="plan-card color-primary">~略~</div>
    <div class="plan-card color-secondary">~略~</div>
    <div class="plan-card color-focus">~略~</div>
    <div class="plan-card color-common">~略~</div>
    <div class="plan-card color-success">~略~</div>
    <div class="plan-card color-warning">~略~</div>
    <div class="plan-card color-error">~略~</div>
</div>

Simple Plans

也可以使用小巧的簡化版 Plan,不需要額外設定,只要移除 .plan-detail 即可。

Standard

Lorem ipsum dolor sit amet.
NTD 149 / month
5% Transaction Fee per Order

Standard

Lorem ipsum dolor sit amet.
NTD 149 / month
5% Transaction Fee per Order

Standard

Lorem ipsum dolor sit amet.
NTD 149 / month
5% Transaction Fee per Order

Standard

Lorem ipsum dolor sit amet.
NTD 149 / month
5% Transaction Fee per Order

Standard

Lorem ipsum dolor sit amet.
NTD 149 / month
5% Transaction Fee per Order

Standard

Lorem ipsum dolor sit amet.
NTD 149 / month
5% Transaction Fee per Order

Standard

Lorem ipsum dolor sit amet.
NTD 149 / month
5% Transaction Fee per Order

Standard

Lorem ipsum dolor sit amet.
NTD 149 / month
5% Transaction Fee per Order
<div class="plan-card">
    <span class="ribbon-flag"></span>
    <div class="plan-header">
        <h4 class="plan-header-title">Standard</h4>
        <div class="plan-header-note">Lorem ipsum dolor sit amet.</div>
    </div>
    <div class="plan-main">
        <div class="plan-price">
            NTD <strong class="price">149</strong> / month
        </div>
        <div class="plan-main-text">5% Transaction Fee per Order</div>
    </div>
    <div class="plan-footer">
        <a class="btn-outline">Signin</a>
    </div>
</div>