<span class="cgds badge bg-primary"><i class="bi bi-qr-code left"></i>មានរូបតំណាង<i class="bi bi-qr-code right"></i></span>
<span class="cgds badge bg-primary">គោល</span>
<span class="cgds badge bg-secondary">រង</span>
<span class="cgds badge bg-success">ជោគជ័យ</span>
<span class="cgds badge bg-danger">គ្រោះថ្នាក់</span>
<span class="cgds badge bg-warning text-dark">ការព្រមាន</span>
<span class="cgds badge bg-info text-dark">ព័ត៌មាន</span>
<span class="cgds badge bg-light text-dark">ភ្លឺ</span>
<span class="cgds badge bg-dark">ងងឹត</span>

        

 
<h1 class="d-flex align-items-center">ក្បាលទំព័រ H1 <span class="ms-4 cgds badge bg-dark"><i class="bi bi-qr-code left"></i>ងងឹត<i class="bi bi-qr-code right"></i></span></h1>
<h2>ក្បាលទំព័រ H2 <span class="cgds badge bg-dark">ងងឹត</span></h2>
<h3>ក្បាលទំព័រ H3 <span class="cgds badge bg-dark">ងងឹត</span></h3>
<h4>ក្បាលទំព័រ H4  <span class="cgds badge bg-dark">ងងឹត</span></h4>
<p>កថាខណ្ឌ <span class="cgds badge bg-secondary">Dev</span></p>

        

 
<div class="cgds btn btn-primary">តេស្ត <span class="cgds badge bg-light text-dark">99</span></div>
<div class="cgds btn btn-primary btn-lg">តេស្ត <span class="cgds badge bg-light text-dark">99</span></div>
<button type="button" class="cgds btn btn-primary position-relative">
  ប្រអប់សារ
  <span class="cgds position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
      99+
      <span class="visually-hidden">សារមិនទាន់បានអាន</span>
    </span>
</button>
<button type="button" class="cgds btn btn-primary position-relative">
  ប្រវត្តិរូប
  <span class="cgds position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
      <span class="visually-hidden">ការជូនដំណឹងថ្មី</span>
    </span>
</button>
<i class="bi bi-bell position-relative fs-4">
    <span class="cgds position-absolute top-0 start-100 translate-middle p-2 bg-warning border border-light rounded-circle">
      <span class="visually-hidden">ការជូនដំណឹងថ្មី</span>
    </span>
</i>