កាត

កាតអាចត្រូវបានប្រើសម្រាប់បឋមកថានិងបាតកថា មាតិកាដែលមានផ្ទៃខាងក្រោយ និងមាតិកាដែលមានរូបភាព។

មានជាទូទៅ

ឧទាហរណ៍

កាតតំណាង

img alternate text goes here

ធ្វើបច្ចុប្បន្នភាពចុងក្រោយនៅ៣នាទីមុន

ចំណងជើងកាត

ដាក់ពាក្យគន្លឹះខ្លីៗនៅលើចំណងជើងកាតដើម្បីតំណាងឱ្យអត្ថន័យរួមនៅក្នុងកាត។

ចុចសម្រាប់ទៅទំព័រផ្សេងៗ 

 
<div class="card cgds">
  <img class="card-img-top" alt="img alternate text goes here"
       src="/assets/img/component/card/image-in-card.svg">
  <div class="card-body">
    <p class="card-text"><small class="text-muted">ធ្វើបច្ចុប្បន្នភាពចុងក្រោយនៅ៣នាទីមុន</small></p>
    <h3 class="card-title">ចំណងជើងកាត</h3>
    <p class="card-text"> ដាក់ពាក្យគន្លឹះខ្លីៗនៅលើចំណងជើងកាតដើម្បីតំណាងឱ្យអត្ថន័យរួមនៅក្នុងកាត។
    </p>
    <a class="card-link" href="#">
      <i class="bi bi-arrow-right-circle-fill"></i>
      ចុចសម្រាប់ទៅទំព័រផ្សេងៗ
    </a>
  </div>
</div>

កាតមានមុខងារ

img alternate text goes here

ធ្វើបច្ចុប្បន្នភាពចុងក្រោយនៅ៣នាទីមុន

ចំណងជើងកាត

ដាក់ពាក្យគន្លឹះខ្លីៗនៅលើចំណងជើងកាតដើម្បីតំណាងឱ្យអត្ថន័យរួមនៅក្នុងកាត។

ចុចសម្រាប់ទៅទំព័រផ្សេងៗ
img alternate text goes here

ចំណងជើងកាត

ដាក់ពាក្យគន្លឹះខ្លីៗនៅលើចំណងជើងកាតដើម្បីតំណាងឱ្យអត្ថន័យរួមនៅក្នុងកាត។

 
<div class="cgds-example-card-grid">
  <div class="card cgds"><img class="card-img-top" alt="img alternate text goes here"
                              src="/assets/img/component/card/image-in-card.svg">
    <div class="card-body">
      <p class="card-text"><small class="text-muted">ធ្វើបច្ចុប្បន្នភាពចុងក្រោយនៅ៣នាទីមុន</small></p>
      <h3 class="card-title" href="#">ចំណងជើងកាត</h3>
      <p class="card-text">ដាក់ពាក្យគន្លឹះខ្លីៗនៅលើចំណងជើងកាតដើម្បីតំណាងឱ្យអត្ថន័យរួមនៅក្នុងកាត។</p>
      <a class="card-link blog-btn" href="#">
        <i class="bi bi-arrow-right-circle-fill"></i>
        ចុចសម្រាប់ទៅទំព័រផ្សេងៗ
      </a>
    </div>
  </div>
  <div class="card cgds">
    <img class="card-img-top" alt="img alternate text goes here"
         src="/assets/img/component/card/image-in-card.svg">
    <div class="card-body"><a class="card-link" href="#">
      <h3 class="card-title">ចំណងជើងកាត</h3>
    </a>
      <p class="card-text">ដាក់ពាក្យគន្លឹះខ្លីៗនៅលើចំណងជើងកាតដើម្បីតំណាងឱ្យអត្ថន័យរួមនៅក្នុងកាត។</p>
    </div>
  </div>
</div>

កាតផ្ដល់ព័ត៌មាន

img alternate text goes here

ចំណងជើងកាត

ដាក់ពាក្យគន្លឹះខ្លីៗនៅលើចំណងជើងកាតដើម្បីតំណាងឱ្យអត្ថន័យរួមនៅក្នុងកាត។ 

 
<div class="card cgds">
  <img class="card-img-top" alt="img alternate text goes here"
       src="/assets/img/component/card/image-in-card.svg">
  <div class="card-body">
    <h3 class="card-title">ចំណងជើងកាត</h3>
    <p class="card-text">ដាក់ពាក្យគន្លឹះខ្លីៗនៅលើចំណងជើងកាតដើម្បីតំណាងឱ្យអត្ថន័យរួមនៅក្នុងកាត។
    </p>
  </div>
</div>

រចនាកាតដោយប្រើតែ HTML

ចំណងជើងកាត
ដាក់ពាក្យគន្លឹះខ្លីៗនៅលើចំណងជើងកាតដើម្បីតំណាងឱ្យអត្ថន័យរួមនៅក្នុងកាត។

ចំណងជើងកាត

ដាក់ពាក្យគន្លឹះខ្លីៗនៅលើចំណងជើងកាតដើម្បីតំណាងឱ្យអត្ថន័យរួមនៅក្នុងកាត។ 

 
<div class="cgds-example-card-grid">
  <div class="card cgds">
    <div class="card-body">
      <h5 class="card-title">ចំណងជើងកាត</h5><a class="card-text">ដាក់ពាក្យគន្លឹះខ្លីៗនៅលើចំណងជើងកាតដើម្បីតំណាងឱ្យអត្ថន័យរួមនៅក្នុងកាត។</a>
    </div>
  </div>
  <div class="card cgds">
    <div class="card-body">
      <h1 class="card-title">ចំណងជើងកាត</h1><strong class="card-text">ដាក់ពាក្យគន្លឹះខ្លីៗនៅលើចំណងជើងកាតដើម្បីតំណាងឱ្យអត្ថន័យរួមនៅក្នុងកាត។</strong>
    </div>
  </div>
</div>
img alternate text goes here

ចំណងជើងកាត

ដាក់ពាក្យគន្លឹះខ្លីៗនៅលើចំណងជើងកាតដើម្បីតំណាងឱ្យអត្ថន័យរួមនៅក្នុងកាត។

កាតផ្តេក

ធ្វើបច្ចុប្បន្នភាពចុងក្រោយនៅ៣នាទីមុន

ចំណងជើងកាត

ដាក់ពាក្យគន្លឹះខ្លីៗនៅលើចំណងជើងកាតដើម្បីតំណាងឱ្យអត្ថន័យរួមនៅក្នុងកាត។

ចុចសម្រាប់ទៅទំព័រផ្សេងៗ

ធ្វើបច្ចុប្បន្នភាពចុងក្រោយនៅ៣នាទីមុន

ចំណងជើងកាត

ដាក់ពាក្យគន្លឹះខ្លីៗនៅលើចំណងជើងកាតដើម្បីតំណាងឱ្យអត្ថន័យរួមនៅក្នុងកាត។

ចុចសម្រាប់ទៅទំព័រផ្សេងៗ 

 
<div class="cgds-example-card-grid">
  <div class="card cgds" variant="card-horizontal">
    <img class="card-img-left" src="/assets/img/component/card/image-in-horizontal-card.svg"/>
    <div class="card-body">
      <p class="card-text"><small class="text-muted">ធ្វើបច្ចុប្បន្នភាពចុងក្រោយនៅ៣នាទីមុន</small></p>
      <h3 class="card-title">ចំណងជើងកាត</h3>
      <p class="card-text">ដាក់ពាក្យគន្លឹះខ្លីៗនៅលើចំណងជើងកាតដើម្បីតំណាងឱ្យអត្ថន័យរួមនៅក្នុងកាត។</p>
      <a class="card-link blog-btn" href="#">
        <i class="bi bi-arrow-right-circle-fill"></i>
          ចុចសម្រាប់ទៅទំព័រផ្សេងៗ
      </a>
    </div>
  </div>
  <div class="card cgds" variant="card-horizontal">
    <img class="card-img-left" src="/assets/img/component/card/image-in-horizontal-card.svg"/>
    <div class="card-body">
      <p class="card-text"><small class="text-muted">ធ្វើបច្ចុប្បន្នភាពចុងក្រោយនៅ៣នាទីមុន</small></p>
      <h3 class="card-title">ចំណងជើងកាត</h3>
      <p class="card-text">ដាក់ពាក្យគន្លឹះខ្លីៗនៅលើចំណងជើងកាតដើម្បីតំណាងឱ្យអត្ថន័យរួមនៅក្នុងកាត។</p>
      <a class="card-link blog-btn" href="#">
        <i class="bi bi-arrow-right-circle-fill"></i>
          ចុចសម្រាប់ទៅទំព័រផ្សេងៗ
      </a>
    </div>
  </div>
</div>

បណ្តុំកាត

img alternate text goes here

ធ្វើបច្ចុប្បន្នភាពចុងក្រោយនៅ៣នាទីមុន

ចំណងជើងកាត

ដាក់ពាក្យគន្លឹះខ្លីៗនៅលើចំណងជើងកាតដើម្បីតំណាងឱ្យអត្ថន័យរួមនៅក្នុងកាត។

ចុចសម្រាប់ទៅទំព័រផ្សេងៗ
img alternate text goes here

ធ្វើបច្ចុប្បន្នភាពចុងក្រោយនៅ៣នាទីមុន

ចំណងជើងកាត

ដាក់ពាក្យគន្លឹះខ្លីៗនៅលើចំណងជើងកាតដើម្បីតំណាងឱ្យអត្ថន័យរួមនៅក្នុងកាត។

ចុចសម្រាប់ទៅទំព័រផ្សេងៗ 

 
<div class="cgds-example-card-grid">
  <div class="card-group">
    <div class="card cgds">
      <img class="card-img-top" alt="img alternate text goes here"
           src="/assets/img/component/card/image-in-card.svg">
      <div class="card-body">
        <p class="card-text"><small class="text-muted">ធ្វើបច្ចុប្បន្នភាពចុងក្រោយនៅ៣នាទីមុន</small></p>
        <h3 class="card-title">ចំណងជើងកាត</h3>
        <p class="card-text">ដាក់ពាក្យគន្លឹះខ្លីៗនៅលើចំណងជើងកាតដើម្បីតំណាងឱ្យអត្ថន័យរួមនៅក្នុងកាត។
        </p>
        <a class="card-link blog-btn" href="#">
          <i class="bi bi-arrow-right-circle-fill"></i>
          ចុចសម្រាប់ទៅទំព័រផ្សេងៗ
        </a>
      </div>
    </div>
    <div class="card cgds">
      <img class="card-img-top" alt="img alternate text goes here"
           src="/assets/img/component/card/image-in-card.svg">
      <div class="card-body">
        <p class="card-text"><small class="text-muted">ធ្វើបច្ចុប្បន្នភាពចុងក្រោយនៅ៣នាទីមុន</small></p>
        <h3 class="card-title">ចំណងជើងកាត</h3>
        <p class="card-text">ដាក់ពាក្យគន្លឹះខ្លីៗនៅលើចំណងជើងកាតដើម្បីតំណាងឱ្យអត្ថន័យរួមនៅក្នុងកាត។
        </p>
        <a class="card-link blog-btn" href="#">
          <i class="bi bi-arrow-right-circle-fill"></i>
          ចុចសម្រាប់ទៅទំព័រផ្សេងៗ                </a>
      </div>
    </div>
  </div>
</div>

កាតមានមុខងារ

កុំព្យូទ័រយួរដៃ
Apple

Macbook Pro M1

កុំព្យូទ័រយួរដៃ
Apple

Macbook Pro M1

កុំព្យូទ័រយួរដៃ
Apple

Macbook Pro M1

 
<div class="cgds-example-card-grid">
  <div tabindex="0" variant="card-action" class="card cgds">
    <div class="card-body">
      <h6 class="text-muted card-subtitle">
        <div><i class="bi bi-box"></i>កុំព្យូទ័រយួរដៃ</div>
        <div class="card-input">
          <div class=""><input aria-label="selectablecard" type="checkbox" class="form-check-input"><label
            title="" class="form-check-label"></label></div>
        </div>
      </h6>
      <h5 class="card-title">Apple <i class="bi bi-apple"></i></h5>
      <p class="card-text">Macbook Pro M1</p>
    </div>
  </div>

  <div tabindex="0" variant="card-action" class="card cgds">
    <div class="card-body">
      <h6 class="text-muted card-subtitle">
        <div><i class="bi bi-box"></i>កុំព្យូទ័រយួរដៃ</div>
        <div class="card-input">
          <div class=""><input aria-label="selectablecard" type="radio" class="form-check-input"><label
            title="" class="form-check-label"></label></div>
        </div>
      </h6>
      <h5 class="card-title">Apple <i class="bi bi-apple"></i></h5>
      <p class="card-text">Macbook Pro M1</p>
    </div>
  </div>

  <div tabindex="0" variant="card-action" class="card cgds">
    <div class="card-body">
      <h6 class="text-muted card-subtitle">
        <div><i class="bi bi-box"></i>កុំព្យូទ័រយួរដៃ</div>
        <div class="card-input">
          <div class="form-switch"><input aria-label="selectablecard" type="checkbox"
                                          class="form-check-input"><label title="" class="form-check-label"></label></div>
        </div>
      </h6>
      <h5 class="card-title">Apple <i class="bi bi-apple"></i></h5>
      <p class="card-text">Macbook Pro M1</p>
    </div>
  </div>
</div>

កាតមានបន្ថែមបន្ថយចំនួន

កន្ត្រក

ម៉ាកទំនិញ
Apple

 
<div variant="card-action-quantity-toggle" class="card cgds">
  <div class="card-body">
    <div>
      <h4 class="card-title">កន្ត្រក <i class="bi bi-cart"></i></h4>
      <button type="button" class="btn-close" aria-label="Close"></button>
    </div>
    <div>
      <div class="card-unit">
        <h5 class="text-muted card-subtitle">ម៉ាកទំនិញ</h5>
        <h6 class="mt-2 card-subtitle">Apple</h6>
      </div>
      <label class="visually-hidden form-label">quantity-toggle</label>
      <div variant="quantity-toggle" class="input-group input-group-sm cgds">
        <button aria-label="minus-btn" type="button" class="btn btn-primary cgds"><i
          class="bi bi-dash"></i></button>
        <input aria-label="Quantity" name="quantity" min="0" type="number" class="text-center form-control"
               value="0">
        <button aria-label="plus-btn" type="button" class="btn btn-primary cgds"><i
          class="bi bi-plus"></i></button>
      </div>
    </div>
  </div>
</div>

ធាតុផ្សំ

កាតបុរេជម្រើស

  1. រូបភាព (ដាក់ក៏បានមិនដាក់ក៏បាន)៖ ដើម្បីបង្ហាញប្រាប់អំពីគោលបំណងរបស់កាត។
  2. ដំណឹងបច្ចុប្បន្នភាព៖ ដើម្បីប្រាប់អ្នកប្រើប្រាស់អំពីពេលវេលានៃការធ្វើបច្ចុប្បន្នភាពចុងក្រោយរបស់ខ្លឹមសារនៅក្នុងកាត។
  3. ចំណងជើង៖ ប្រាប់ពីគោលបំណងកាត ដែលជាចំណងជើងខ្លីនិងចំចំណុច ។
  4. ការបរិយាយ៖ រៀបរាប់ប្រាប់អ្នកប្រើប្រាស់ពីព័ត៌មានរបស់កាត។
  5. CTA (ដាក់ក៏បានមិនដាក់ក៏បាន)៖ ពេលអ្នកចង់ឱ្យអ្នកប្រើប្រាស់អ្វីមួយ ឧទាហរណ៍៖ ចុចលើប៊ូតុងដើម្បីឆ្លងទៅកាន់ទំព័រមួយទៀត។ CTA មិនចាំបាច់ដាក់ក៏បានក្នុងករណីដែលកាតធ្វើឡើងដើម្បីតែផ្តល់ព័ត៌មាននិងគ្មានមុខងារអ្វីផ្សេងទេ។

កាតមានមុខងារ

  1. សញ្ញាសំគាល់៖ ដើម្បីបង្ហាញប្រាប់អំពីគោលបំណងរបស់កាត។
  2. ប្រអប់ជ្រើសរើស៖ សម្រាប់ឱ្យអ្នកប្រើអាចជ្រើសរើសយកកាតមួយឬច្រើន។

កាតមានបន្ថែមបន្ថយចំនួន

ប្រើសម្រាប់ការបញ្ជាទិញទំនិញ ឬពេលយើងចង់តម្រូវឱ្យអ្នកប្រើប្រាស់អាចជ្រើសរើសចំនួនដែលពួកគាត់ត្រូវការសម្រាប់ទំនិញមួយ។

  1. ប៊ូតុងកម្រិតចំនួន៖ អនុញ្ញាតឱ្យអ្នកប្រើកំណត់ចំនួនដែលពួកគាត់ត្រូវការឬចង់បាន។
  2. តម្លៃ៖ បង្ហាញប្រាប់ពីតម្លៃមួយឯកតារបស់ទំនិញ និងតម្លៃសរុបដែលគណនាទៅតាមចំនួនដែលអ្នកប្រើប្រាស់បានជ្រើសរើស។

គម្លាត

កាតបុរេជម្រើស

លក្ខណៈដើមរបស់កាត
រក្សាគម្លាតយ៉ាងតិច24pxនៅជុំវិញគែមកាត និងយ៉ាងតិច10pxនៅចន្លោះមាតិកា។

កាតមានមុខងារ

លក្ខណៈរបស់កាតមានមុខងារ
រក្សាគម្លាតយ៉ាងតិច24pxនៅជុំវិញគែមកាត និងយ៉ាងតិច16pxនៅចន្លោះមាតិកា។

កាតមានបន្ថែមបន្ថយចំនួន

លក្ខណៈរបស់កាតមានបន្ថែមបន្ថយចំនួន
រក្សាគម្លាតយ៉ាងតិច24pxនៅជុំវិញគែមកាត និងយ៉ាងតិច16pxនៅចន្លោះមាតិកា។

គោលការណ៍ណែនាំនៃការប្រើប្រាស់

កាតគួរតែត្រូវបានប្រើនៅពេល៖

  1. ពេលត្រូវបង្ហាញមាតិកាស្រដៀងគ្នាដែលត្រូវដាក់ទៅក្នុងផ្នែកណាមួយជាមួយគ្នា។
  2. នៅពេលដែលអ្នកត្រូវការបំបែកផ្នែកណាមួយនៃមាតិកាមកដាក់ដាច់ដោយឡែកពីផ្នែកផ្សេងៗនៃទំព័រ។

កាតមិនគួរតែត្រូវបានប្រើនៅពេល៖

  1. ពេលផ្តល់ដំណឹងដល់អ្នកប្រើប្រាស់អំពីព័ត៌មាន ការផ្លាស់ប្តូរ និងការធ្វើបច្ចុប្បន្នភាពផ្សេងៗ។
  2. ការប្រើប្រាស់កាតច្រើនពេកធ្វើឱ្យទំព័រមើលទៅហាក់ដូចជាដាច់ពីគ្នា និងមិនស៊ីចង្វាក់គ្នា។

គោលការណ៍ណែនាំនៃការរចនា

ចំណងជើងត្រូវសរសេរឱ្យខ្លីនិងច្បាស់ៗ
សរសេរឱ្យខ្លីកុំឱ្យលើសពីមួយបន្ទាត់ ប៉ុន្តែឱ្យច្បាស់ និងព្យាយាមកុំប្រើវណ្ណយុត្តិ។

រចនាវាឱ្យមានលក្ខណៈជាឯកសណ្ឋានប្រសិនបើកាតទាំងនោះនៅក្នុងក្រុមតែមួយ
សម្រាប់កាតនៅក្នុងក្រុមតែមួយត្រូវរចនាយ៉ាងណាឱ្យកាតទាំងអស់ស៊ីចង្វាក់គ្នាមានបុរេជម្រើសមួយ។

ខ្លឹមសារក្នុងកាតគួរតែសង្ខេបឱ្យខ្លី និងងាយយល់។
កុំព្យាយាមសរសេរមាតិកាវែងពេក។ធ្វើយ៉ាងណាឱ្យវាខ្លីហើយចំចំណុច ដើម្បីអ្នកប្រើប្រាស់ចាប់អារម្មណ៍ចង់អាន។

ខ្នាតសម្រាប់រចនា

$card-spacer-y: 1.5rem !default;
$card-spacer-x: 1.5rem !default;
$card-title-spacer-y: $spacer * .5 !default;
$card-border-width: $border-width !default;
$card-border-color: $gray-400 !default;
$card-border-radius: $border-radius !default;
$card-box-shadow: null !default;
$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
$card-cap-padding-y: $card-spacer-y * .5 !default;
$card-cap-padding-x: $card-spacer-x !default;
$card-cap-bg: rgba($black, .03) !default;
$card-cap-color: null !default;
$card-height: null !default;
$card-color: null !default;
$card-bg: $white !default;
$card-img-overlay-padding: $spacer !default;
$card-group-margin: $grid-gutter-width * .5 !default;
//Action card specific
$card-transition-duration: 0.3s !default;
$card-transition-timing-function: ease-in-out !default;
$card-active-border: inset 0px 0px 0px 2.1px $link-color !default;
Home
Previous version 1.0.3