Information visualization dashboard design

<div class="container">
       <div class="row">
           <div class="col-lg-3 col-md-6">
               <div class="info">
                      <div class="description">
                           <div class="title">Orders</div>
                       <div class="count"><span class="babage bg-success">+20%</span> 1542</div>
                       <small>From previous period</small>
                      </div>
                      <div class="icon"><img src="shopping-cart.svg" alt=""></div>
               </div>
           </div>
           <div class="col-lg-3 col-md-6">
                   <div class="info">
                          <div class="description">
                               <div class="title">Revenue</div>
                           <div class="count"><span class="babage bg-warning">+20%</span> 4242</div>
                           <small>From previous period</small>
                          </div>
                          <div class="icon"><img src="bars.svg" alt=""></div>
                   </div>
               </div>
               <div class="col-lg-3 col-md-6">
                       <div class="info">
                              <div class="description">
                                   <div class="title">Average Price</div>
                               <div class="count"><span class="babage bg-danger">+20%</span> 3241</div>
                               <small>From previous period </small>
                              </div>
                              <div class="icon"><img src="price-tag.svg" alt=""></div>
                       </div>
                   </div>
                   <div class="col-lg-3 col-md-6">
                           <div class="info">
                                  <div class="description">
                                       <div class="title">Product Sold</div>
                                   <div class="count"><span class="babage bg-primary">+20%</span> 6574</div>
                                   <small>From previous period</small>
                                  </div>
                                  <div class="icon"><img src="shopping-cart.svg" alt=""></div>
                           </div>
                       </div>
           
       </div>
   </div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600&display=swap');
        body { font-family: 'Poppins', sans-serif; }
        .info {background: linear-gradient(316deg, #607d8b, #23bbad); position: relative; color: #fff;     border-radius: 6px;  margin-top: 30px;}
        .description { background: url(background.png); width: 100%; background-size: cover; background-position: 10% 100%;
    background-repeat: no-repeat; padding: 15px; }
        .info .title { font-weight: 500; font-size: 18px; text-transform: uppercase; letter-spacing: 1px; margin: 10px 0px; }
        .info .count   {font-size: 22px; font-weight: 500;}
        .info .count span.babage { font-size: 12px; padding: 2px 4px; border-radius: 2px;}
        .info .icon { width: 45px;
    height: 45px;
    background: #0202022e;
    position: absolute;
    right: 15px;
    top: 15px;
    border-radius: 4px; box-sizing: border-box; padding: 8px;
}
.info .icon img { width: 100%;}
    </style>