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

<div class="card text-white p-5px">
  <!-- card-img -->
  <div style="max-height: 250px" class="overflow-hidden">
    <img src="assets/img/gallery/widget-cover-1.jpg" class="card-img" />
  </div>
  
  <!-- card-img-overlay -->
  <div class="card-img-overlay d-flex flex-column bg-gray-600 bg-opacity-75 m-5px" style="z-index: 20">
    <!-- top content -->
    <div class="flex-fill">
      <div class="d-flex align-items-center">
        <h6>Youtube</h6>
        <div class="dropdown ms-auto">
          <a href="#" class="text-white" data-bs-toggle="dropdown"><i class="fa fa-ellipsis-h"></i></a>
          <div class="dropdown-menu dropdown-menu-end">
            ...
          </div>
        </div>
      </div>
    </div>
    
    <!-- bottom-content -->
    <div>
      <a href="#" class="text-white text-decoration-none d-flex align-items-center">
        <div class="bg-gradient-red w-50px h-50px rounded-3 d-flex align-items-center justify-content-center">
          <i class="fa fa-play"></i>
        </div>
        <div class="ms-3 flex-1">
          <div class="fw-bold">New Videos - Behind The Forest Tours</div>
          <div class="fs-13px">
            <i class="far fa-eye"></i> 892 نمایش 
            <i class="far fa-clock ms-3"></i> 39دقیقه قبل</div>
        </div>
      </a>
    </div>
  </div>
  
  <!-- card-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>

<div class="list-group">
  <!-- with icon -->
  <div class="list-group-item d-flex align-items-center">
    <div class="w-40px h-40px d-flex align-items-center justify-content-center bg-gradient-orange text-white rounded-2 ms-n1">
      <i class="fa fa-book fa-lg"></i>
    </div>
    <div class="flex-fill px-3">
      <div class="fw-bold">ای بوک</div>
      <div class="small text-white text-opacity-50">32 دانلود جدید</div>
    </div>
    <div class="dropdown">
      <a href="#" data-bs-toggle="dropdown" class="text-white text-opacity-50"><i class="fa fa-ellipsis-h"></i></a>
      <div class="dropdown-menu dropdown-menu-end">
        ...
      </div>
    </div>
  </div>
  
  <!-- with image -->
  <a href="#" class="list-group-item list-group-item-action d-flex align-items-center text-white">
    <div class="w-40px h-40px d-flex align-items-center justify-content-center ms-n1">
      <img src="assets/img/user/user.jpg" class="ms-100 mh-100 rounded-circle" />
    </div>
    <div class="flex-fill ps-3">
      <div class="fw-bold">
        ایسا مینو <span class="fa fa-circle text-success fs-9px ms-2"></span>
      </div>
    </div>
  </a>
  
  <!-- link with icon -->
  <a href="#" class="list-group-item list-group-item-action d-flex align-items-center">
    <div class="flex-fill">
      <div class="fw-bold">لینک با فلش</div>
    </div>
    <div>
      <i class="fa fa-chevron-left"></i>
    </div>
  </a>
</div>

<a href="#" class="card text-decoration-none">
  <div class="card-body d-flex align-items-center text-white m-5px bg-white bg-opacity-15">
    <div class="flex-fill">
      <div class="mb-1">مجموع بازدید کنندگان + نمایش صفحه</div>
      <h2>22,930</h2>
      <div>امروز, 11:25AM</div>
    </div>
    <div class="opacity-5">
      <i class="fa fa-shopping-bag fa-4x"></i>
    </div>
  </div>
  
  <!-- card-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>
</a>

<div class="card">
  <div class="card-body text-white text-center">
    <div class="fs-16px fw-bold">تجزیه و تحلیل وب هفتگی</div>
    <div class="fs-13px mb-3">هفته 11 دی - 17 دی</div>
    <canvas id="barChart" height="120"></canvas>
  </div>
  <div class="list-group">
    <div class="list-group-item border-top-0 rounded-top-0 d-flex align-items-center p-3">
      <div class="w-40px h-40px bg-white bg-opacity-25 d-flex align-items-center justify-content-center">
        <i class="fa fa-user fa-lg"></i>
      </div>
      <div class="flex-fill px-3">
        <div class="fw-bold">کل بازدید کنندگان</div>
        <div class="small text-white text-opacity-50">11 دی - 17 دی</div>
      </div>
      <div>
        <h2 class="mb-0">1.3m</h2>
      </div>
    </div>
  </div>
  
  <!-- card-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>

<div class="widget-user-list">
  <div class="widget-user-list-item"><a href="#" class="widget-user-list-link"><img src="assets/img/user/user-1.jpg" alt="" /></a></div>
  <div class="widget-user-list-item"><a href="#" class="widget-user-list-link"><img src="assets/img/user/user-2.jpg" alt="" /></a></div>
  <div class="widget-user-list-item"><a href="#" class="widget-user-list-link"><img src="assets/img/user/user-3.jpg" alt="" /></a></div>
  <div class="widget-user-list-item"><a href="#" class="widget-user-list-link"><img src="assets/img/user/user-4.jpg" alt="" /></a></div>
  <div class="widget-user-list-item"><a href="#" class="widget-user-list-link"><img src="assets/img/user/user-5.jpg" alt="" /></a></div>
  <div class="widget-user-list-item"><a href="#" class="widget-user-list-link"><img src="assets/img/user/user-6.jpg" alt="" /></a></div>
  <div class="widget-user-list-item"><a href="#" class="widget-user-list-link"><img src="assets/img/user/user-7.jpg" alt="" /></a></div>
  <div class="widget-user-list-item"><a href="#" class="widget-user-list-link bg-gray-200 text-gray-500 fs-12px fw-bold">+26</a></div>
</div>

<div class="card">
  <div class="m-1 bg-white bg-opacity-15">
    <div class="card-header fw-bold border-0">Google Map</div>
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d960.5886473867613!2d-122.41743634015282!3d37.776451983493104!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8085809c6c8f4459%3A0xb10ed6d9b5050fa5!2sTwitter+HQ!5e0!3m2!1sen!2s!4v1495935122933" style="border:0; width: 100%; height: 10rem;" allowfullscreen></iframe>
    <div class="list-group list-group-flush">
      <div class="list-group-item d-flex">
        <div class="w-30px h-40px d-flex align-items-center justify-content-center">
          <i class="fa fa-car fa-2x text-gray-300"></i>
        </div>
        <div class="flex-fill px-3">
          <div class="fw-bold">آدرس در اینجا</div>
          <div class="fs-12px">سریعترین مسیر، ترافیک معمولی</div>
        </div>
        <div class="text-nowrap">
          <div class="text-success fw-bold">3:45</div>
          <div class="fs-12px">393km</div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- card-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>

<div class="card">
  <div class="card-header bg-none fw-bold d-flex align-items-center">گروه بحث <a href="#" class="ms-auto text-muted text-decoration-none" data-toggle="card-expand"><i class="fa fa-expand"></i></a></div>
  <div class="card-body bg-white bg-opacity-15" data-scrollbar="true" data-height="200px">
    <div class="widget-chat">
      <div class="widget-chat-date">امروز 14:21</div>
      <div class="widget-chat-item">
        <div class="widget-chat-media"><img src="assets/img/user/user-2.jpg" alt="" /></div>
        <div class="widget-chat-content">
          <div class="widget-chat-name">رابرت لمبرت</div>
          <div class="widget-chat-message">
            Not much, It's got a new look, contact pics show up in group messaging, some other small stuff.
          </div>
          <div class="widget-chat-message last">
            How's crusty old iOS 6 treating you?
          </div>
        </div>
      </div>
      <div class="widget-chat-item reply">
        <div class="widget-chat-content">
          <div class="widget-chat-message last">
            Sucks
          </div>
          <div class="widget-chat-status"><b>خوانده شد</b> 16:30</div>
        </div>
      </div>
    </div>
  </div>
  <div class="card-footer bg-none">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="جستجو برای...">
      <button class="btn btn-outline-default" type="button"><i class="fa fa-paper-plane text-muted"></i></button>
    </div>
  </div>
  
  <!-- card-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>

<div class="card">
  <div class="m-1 bg-white bg-opacity-15">
    <div class="position-relative overflow-hidden" style="height: 165px">
      <img src="assets/img/gallery/widget-cover-1.jpg" class="card-img rounded-0" alt="" />
      <div class="card-img-overlay text-white text-center bg-dark-transparent-5">
        <div class="mb-2">
          <img src="assets/img/user/user-5.jpg" alt="" width="80" class="rounded-circle" />
        </div>
        <div>
          <div class="fw-bold">ماری پیترسون</div>
          <div class="fs-12px">تسلیم نشو</div>
        </div>
      </div>
    </div>
    <div class="card-body py-2 px-3">
      <div class="row text-center">
        <div class="col-4">
          <div class="fw-bold">415</div>
          <div class="fs-12px">posts</div>
        </div>
        <div class="col-4">
          <div class="fw-bold">140k</div>
          <div class="fs-12px">followers</div>
        </div>
        <div class="col-4">
          <div class="fw-bold">697</div>
          <div class="fs-12px">following</div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- card-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>

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action d-flex align-items-center text-white">
    <div class="w-60px h-60px d-flex align-items-center justify-content-center ms-n1">
      <img src="assets/img/product/product-1.jpg" class="mw-100 mh-100 rounded">
    </div>
    <div class="flex-fill px-3">
      <div class="fw-bold">iPhone 11 Pro Max</div>
      <div class="small text-white text-opacity-50">Apple</div>
      <div class="d-flex align-items-center fs-11px">
        <i class="fa fa-star text-warning"></i>
        <i class="fa fa-star text-warning"></i>
        <i class="fa fa-star text-warning"></i>
        <i class="fa fa-star text-warning"></i>
        <i class="fa fa-star text-gray-300 me-1"></i>
        (128)
      </div>
    </div>
    <div>
      <span class="label bg-transparent border border-theme text-theme fs-12px fw-500 rounded-sm">
        999.000 تومان
      </span>
    </div>
  </a>
</div>

<div class="card">
  <div class="card-header fw-bold">امروز, 4 دی</div>
  <div class="widget-reminder">
    <div class="widget-reminder-item">
      <div class="widget-reminder-time">20:00<br>23:00</div>
      <div class="widget-reminder-divider bg-primary"></div>
      <div class="widget-reminder-content">
        <div class="fw-bold">شام با ریچارد</div>
        <div class="fs-13px">رستوران تامی</div>
        <div class="d-flex align-items-center fs-13px mt-2">
          <div class="flex-fill d-flex align-items-center">
            <img src="assets/img/user/user-3.jpg" alt="" width="16" class="rounded-circle me-2" /> ریچارد لانگ
          </div>
          <a href="#" class="ms-auto">مخاطب</a>
        </div>
      </div>
    </div>
  </div>
  
  <!-- card-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>

<div class="card">
  <div class="list-group list-group-flush">
    <a href="#" class="list-group-item list-group-item-action d-flex align-items-center text-white">
      <div class="flex-fill pe-3">
        <div class="fw-bold">کتابخانه (20)</div>
        <div class="small text-white text-opacity-50">3,192 تصویر یافت شد</div>
      </div>
      <div>
        <i class="fa fa-chevron-left fa-lg text-white text-opacity-50"></i>
      </div>
    </a>
  </div>
  <hr class="m-0" />
  <div class="card-body">
    <div class="widget-img-list">
      <div class="widget-img-list-item"><a href="#"><span class="img" style="background-image: url(assets/img/gallery/gallery-1.jpg)"></span></a></div>
      ...
    </div>
  </div>
  
  <!-- card-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>