<div class="card-shadow card-container-vertical">
          <div class="badge-text  color-bg-secondary  card-badge">New</div>
          <div class="icon-container">
            <div class="card-icon"><img src="../../../website-docs/images/heart.png" alt="heart-icon" /></div>
          </div>
          <img src="../../../website-docs/images/book.jpeg" alt="card-img" class="img-responsive card-img" />
          <div class="card-body-vertical">
            <div class="card-vertical-section">
              <div class="text-2xl font-bold card-heading">The Alchemist</div>
              <div class="text-sm color-text-grey">Author: Paulo Coehlo</div>
              <div class="card-price">
                <span> ₹ 229 </span>
                <span class="price-before text-xs"> ₹350 </span>
                <span class="text-base inline-block">4.6 <i class="fa fa-star checked"></i> /5</span>
              </div>
              <button class="btn btn-sm">add to cart</button>
            </div>
          </div>
        </div>

        <div class="card-shadow card-container-horizontal">
          <img src="../../../website-docs/images/book.jpeg" alt="card-img" class="img-responsive card-horizontal-img" />
          <div class="card-horizontal-section">
            <div class="text-2xl font-bold card-heading">The Alchemist</div>
            <div class="text-sm color-text-grey">Author: Paulo Coehlo</div>
            <div class="text-base card-desc">A Fable About Following Your Dream</div>
            <div class="card-price">
              <span> ₹ 229 </span>
              <span class="price-before text-xs"> ₹350 </span>
              <span class="color-text-error text-xs"> (Save 32%) </span>
            </div>
            <span class="text-base inline-block">4.6 <i class="fa fa-star checked"></i> /5</span>
            <button class="btn btn-sm">add to cart</button>
          </div>
        </div>