کارت توضیح هدر در این قسمت قرار دارد...

<!-- basic usage -->
<div class="card">
  <div class="card-header fw-bold small">هدر کارت اینجا</div>
  <div class="card-body">
    <h5 class="card-title">عنوان کارت</h5>
    <h6 class="card-subtitle mb-3 text-white text-opacity-50">زیرنویس کارت</h6>
    <p class="card-text mb-3">...</p>
    <div>
      <a href="#" class="card-link">لینک کارت</a>
      <a href="#" class="card-link">لینک دیگری</a>
    </div>
  </div>
  
  <!-- arrow -->
  <div class="card-arrow">
    <div class="card-arrow-top-left"></div>
    <div class="card-arrow-top-right"></div>
    <div class="card-arrow-bottom-left"></div>
    <div class="card-arrow-bottom-right"></div>
  </div>
</div>

<!-- card with list-group -->
<div class="card">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">...</li>
    <li class="list-group-item">لورم ایپسوم متن ساختگی</li>
    <li class="list-group-item"> صنعت چاپ و با استفاده از طراحان گرافیک</li>
  </ul>
</div>

<div class="card">
  <div class="card-header fw-bold small d-flex">
    <span class="flex-grow-1">...</span>
    <a href="#" data-toggle="card-expand" class="text-white text-opacity-50 text-decoration-none"><i class="fa fa-fw fa-expand"></i> EXPAND</a>
  </div>
</div>

<!-- using grid -->
<div class="row">
  <div class="col-sm-8">
    <div class="card">...</div>
  </div>
</div>

<!-- using utilities -->
<div class="card w-25">...</div>
<div class="card w-50">...</div>
<div class="card w-75">...</div>

<!-- using custom css -->
<div class="card" style="width: 18rem;">...</div>

<!-- nav tabs -->
<div class="card">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      ...
    </ul>
  </div>
</div>

<!-- nav-pills -->
<div class="card">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      ...
    </ul>
  </div>
</div>

<!-- image caps -->
<div class="card mb-3">
  <div class="card-body">
    <img src="https://via.placeholder.com/600x400/c9d2e3/212837" alt="" class="card-img-top" />
  </div>
  <div class="card-body">
    <h5 class="card-title">...</h5>
    <p class="card-text">...</p>
  </div>
</div>

<!-- image overlay -->
<div class="card p-3">
  <img src="https://via.placeholder.com/600x750/000000/ffffff" alt="" class="card-img" />
  <div class="card-img-overlay">
    <h5 class="card-title">...</h5>
    <p class="card-text">...</p>
  </div>
</div>

<div class="card">
  <div class="card-body">
    <div class="row gx-0 align-items-center">
      <div class="col-md-4">
        <img src="https://via.placeholder.com/480x360/c9d2e3/212837" alt="" class="card-img rounded-0" />
      </div>
      <div class="col-md-8">
        <div class="card-body">
          <h5 class="card-title">عنوان کارت</h5>
          <p class="card-text">این یک کارت گسترده تر است با پشتیبانی از متن زیر به عنوان یک متن طبیعی به محتوای اضافی. این محتوا کمی طولانی تر است.</p>
          <p class="card-text"><small class="text-muted">آخرین به‌روزرسانی3 دقیقه قبل </small></p>
        </div>
      </div>
    </div>
  </div>
  
  <!-- arrow -->
  <div class="card-arrow">
    <div class="card-arrow-top-left"></div>
    <div class="card-arrow-top-right"></div>
    <div class="card-arrow-bottom-left"></div>
    <div class="card-arrow-bottom-right"></div>
  </div>
</div>

<!-- background & border -->
<div class="card bg-theme border-theme bg-opacity-25 mb-3">
  <div class="card-header border-theme fw-bold small text-white">...</div>
  <div class="card-body">
    <h5 class="card-title text-white">...</h5>
    <p class="card-text text-white text-opacity-75">...</p>
  </div>
</div>

<!-- border & color -->
<div class="card border-theme mb-3">
  <div class="card-header border-theme fw-bold small text-theme">...</div>
  <div class="card-body">
    <h5 class="card-title text-theme">...</h5>
    <p class="card-text text-theme text-opacity-75">...</p>
  </div>
</div>

<div class="card-group">
  <div class="card m-1">...</div>
  <div class="card m-1">...</div>
  <div class="card m-1">...</div>
</div>

<div class="row row-cols-1 row-cols-md-2 g-3">
  <div class="col">
    <div class="card h-100">...</div>
  </div>
  <div class="col">
    <div class="card h-100">...</div>
  </div>
  ...
</div>

<!-- javsacript -->
<script src="assets/plugins/masonry-layout/dist/masonry.pkgd.min.js"></script>

<!-- html -->
<div class="row" data-masonry='{"percentPosition": true  , "originLeft": false}'>
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card">...</div>
  </div>
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card">...</div>
  </div>
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card">...</div>
  </div>
</div>