<div class="card">
   <div class="card-body">
      <div class="d-flex align-items-center">
         <div class="subheader">Sales</div>
         <div class="ml-auto">
            <div class="dropdown">
               <a class="dropdown-toggle text-muted" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Last 7 days
               </a>
               <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
                  <a class="dropdown-item active" href="#">Last 7 days</a>
                  <a class="dropdown-item" href="#">Last 30 days</a>
                  <a class="dropdown-item" href="#">Last 3 months</a>
               </div>
            </div>
         </div>
      </div>
      <div class="h1 mb-3">75%</div>
      <div class="d-flex mb-2">
         <div>Conversion rate</div>
         <div class="ml-auto">
            <span class="text-green d-inline-flex align-items-center lh-1">
               7% <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon ml-1"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
            </span>
         </div>
      </div>
      <div class="progress progress-sm">
         <div class="progress-bar bg-blue" style="width: 75%" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
            <span class="sr-only">75% Complete</span>
         </div>
      </div>
   </div>
</div>