horizontal card

PHOTO EMBED

Mon Feb 07 2022 12:25:08 GMT+0000 (UTC)

Saved by @viresh #html

// variant 1 
<div class="card-wrapper product-card horizontal-card-wrapper d-flex">
      <div class="p-4 container-center">
        <img
          class="img-responsive horizontal-card-img"
          src="../../assets/monitor.png"
          alt="monitor image"
        />
      </div>
      <div class="p-3">
        <h2 class="cart-product-heading">LG 22 inch (55 cm) IPS Monitor</h2>

        <div class="pt-3">
          <div class="product-price-wrapper">
            <span class="product-discount-price text-sm font-wt-bold"
              >Rs. 7,999.00</span
            >
            <span class="product-original-price text-sm ml-6"
              >Rs. 9,438.82</span
            >
          </div>
          <span class="product-discount font-wt-bold text-sm">Save 18%</span>
        </div>

        <div class="horizontal-card-btns-wrapper p-3 d-flex flex-col">
          <button type="button" class="btn btn-primary rounded-sm text-sm p-3">
            <i class="fas fa-shopping-cart mr-3"></i>
            Add to Cart
          </button>
          <button
            type="button"
            class="btn btn-outline btn-primary-outline rounded-sm text-sm p-3"
          >
            <i class="fas fa-heart mr-3"></i>
            Add to Wishlist
          </button>
        </div>
      </div>
    </div>

//variant 2

 <div class="card-wrapper w-100 d-flex mt-4">
      <div class="p-4 container-center">
        <img
          class="img-responsive horizontal-card-img w-75"
          src="../../assets/monitor.png"
          alt="monitor image"
        />
      </div>
      <div class="p-3 w-100">
        <h2 class="cart-product-heading">LG 22 inch (55 cm) IPS Monitor</h2>

        <div class="pt-3">
          <div class="product-price-wrapper">
            <span class="product-discount-price text-sm font-wt-bold"
              >Rs. 7,999.00</span
            >
            <span class="product-original-price text-sm ml-6"
              >Rs. 9,438.82</span
            >
          </div>
          <span class="product-discount font-wt-bold text-sm">Save 18%</span>
        </div>

        <div class="d-flex my-2">
          <div class="d-flex align-center">
            <button
              type="button"
              class="btn btn-quantity btn-primary rounded-full"
            >
              <i class="fas fa-plus text-sm"></i>
            </button>
            <span class="text-sm mx-2 font-wt-semibold">1</span>
            <button
              type="button"
              class="btn btn-quantity btn-outline btn-primary-outline rounded-full"
            >
              <i class="fas fa-minus text-sm"></i>
            </button>
          </div>
          <button
            type="button"
            class="btn btn-outline btn-primary-outline rounded-sm text-sm p-3 ml-8"
          >
            <i class="fas fa-trash mr-3"></i>
            Remove
          </button>

          <button
            type="button"
            class="btn btn-primary rounded-sm text-sm p-3 ml-auto"
          >
            <i class="fas fa-heart mr-3"></i>
            Move to Wishlist
          </button>
        </div>
      </div>
    </div>
content_copyCOPY