List of widget shop being used on the Minimog
<div class="card border-0"> <div class="card-header bg-transparent border-0 p-0"> <h4 class="card-title fs-18 font-weight-500 mb-3">Size</h4> </div> <div class="card-body p-0"> <ul class="list-inline"> <li class="list-inline-item mr-2"> <a href="#" class="btn border border-hover-primary bg-transparent w-45px p-2 font-weight-normal text-primary">XS</a> <a href="#" class="btn border border-hover-primary bg-transparent w-45px p-2 font-weight-normal text-primary">S</a> <a href="#" class="btn border border-hover-primary bg-transparent w-45px p-2 font-weight-normal text-primary">M</a> <a href="#" class="btn border border-hover-primary bg-transparent w-45px p-2 font-weight-normal text-primary">L</a> </li> </ul> </div> </div>
<div style="max-width:250px"> <div class="card border-0 widget-color"> <div class="card-header bg-transparent border-0 p-0"> <h3 class="card-title fs-20 mb-0"> Colors </h3> </div> <div class="card-body px-0 pt-4 pb-0"> <ul class="list-inline mb-0"> <li class="list-inline-item mr-2"> <a href="#" class="d-block item" style="background-color: #d0a272;"></a> </li> <li class="list-inline-item"><a href="#" class="d-block item" style="background-color: #68412d;"></a></li> <li class="list-inline-item"><a href="#" class="d-block item" style="background-color: #000000;"></a></li> <li class="list-inline-item"><a href="#" class="d-block item" style="background-color: #aa5959;"></a></li> <li class="list-inline-item"><a href="#" class="d-block item" style="background-color: #8db4d2;"></a></li> <li class="list-inline-item"><a href="#" class="d-block item" style="background-color: #c2c3a0;"></a></li> <li class="list-inline-item"><a href="#" class="d-block item" style="background-color: #c7857d;"></a></li> <li class="list-inline-item"><a href="#" class="d-block item" style="background-color: #e3e1e7;"></a></li> <li class="list-inline-item"><a href="#" class="d-block item" style="background-color: #b490b0;"></a></li> </ul> </div> </div> </div>
<div style="max-width:270px"> <div class="card border-0"> <div class="card-header bg-transparent border-0 p-0"> <h3 class="card-title fs-18 font-weight-500 mb-0"> Categories </h3> </div> <div class="card-body px-0 pt-2 pb-0"> <ul class="list-unstyled mb-0"> <li class="mb-1"> <a href="#" class="text-body hover-primary border-bottom border-white border-hover-primary d-inline-block lh-12">Sweaters</a> </li> <li class="mb-1"> <a href="#" class="text-body hover-primary border-bottom border-white border-hover-primary d-inline-block lh-12">Dress</a> </li> <li class="mb-1"> <a href="#" class="text-body hover-primary border-bottom border-white border-hover-primary d-inline-block lh-12">Coats & Jackets</a> </li> <li class="mb-1"> <a href="#" class="text-body hover-primary border-bottom border-white border-hover-primary d-inline-block lh-12">Handbag</a> </li> <li class="mb-1"> <a href="#" class="text-body hover-primary border-bottom border-white border-hover-primary d-inline-block lh-12">Boots</a> </li> <li class="mb-1"> <a href="#" class="text-body hover-primary border-bottom border-white border-hover-primary d-inline-block lh-12">Sunglasses</a> </li> <li class="mb-1"> <a href="#" class="text-body hover-primary border-bottom border-white border-hover-primary d-inline-block lh-12">Shirts</a> </li> <li class="mb-1"> <a href="#" class="text-body d-inline-block lh-12">Sale Items !</a> </li> </ul> </div> </div> </div>
<div style="max-width:270px"> <div class="card border-0"> <div class="card-header bg-transparent border-0 p-0"> <h3 class="card-title fs-18 font-weight-500 mb-0"> Price </h3> </div> <div class="card-body px-0 pt-2 pb-0"> <ul class="list-unstyled mb-0"> <li class="mb-1"> <a href="#" class="text-body hover-primary border-bottom border-white border-hover-primary d-inline-block lh-12">All </a> </li> <li class="mb-1"> <a href="#" class="text-body hover-primary border-bottom border-white border-hover-primary d-inline-block lh-12">$10 - $100</a> </li> <li class="mb-1"> <a href="#" class="text-body hover-primary border-bottom border-white border-hover-primary d-inline-block lh-12">$100 - $200</a> </li> <li class="mb-1"> <a href="#" class="text-body hover-primary border-bottom border-white border-hover-primary d-inline-block lh-12">$200 - $300</a> </li> <li class="mb-1"> <a href="#" class="text-body hover-primary border-bottom border-white border-hover-primary d-inline-block lh-12">$300 - $400</a> </li> </ul> </div> </div> </div>
<div style="max-width:270px"> <div class="card border-0"> <div class="card-header bg-transparent border-0 p-0"> <h3 class="card-title fs-18 font-weight-500 mb-0"> Brand </h3> </div> <div class="card-body px-0 pt-2 pb-0"> <ul class="list-unstyled mb-0"> <li class="mb-1"> <a href="#" class="text-body hover-primary border-bottom border-white border-hover-primary d-inline-block lh-12">Pull & Bear</a> </li> <li class="mb-1"> <a href="#" class="text-body hover-primary border-bottom border-white border-hover-primary d-inline-block lh-12">Guess</a> </li> <li class="mb-1"> <a href="#" class="text-body hover-primary border-bottom border-white border-hover-primary d-inline-block lh-12">Zara</a> </li> <li class="mb-1"> <a href="#" class="text-body hover-primary border-bottom border-white border-hover-primary d-inline-block lh-12">Columbia</a> </li> <li class="mb-1"> <a href="#" class="text-body hover-primary border-bottom border-white border-hover-primary d-inline-block lh-12">Mango</a> </li> <li class="mb-1"> <a href="#" class="text-body hover-primary border-bottom border-white border-hover-primary d-inline-block lh-12">Forever 21</a> </li> <li class="mb-1"> <a href="#" class="text-body hover-primary border-bottom border-white border-hover-primary d-inline-block lh-12">H&M</a> </li> </ul> </div> </div> </div>