Developed by Codescandy

List

List #1

Payment Methods

Add Payment
  • **** 1234

    Expires in 10/2023

  • Mastercard ending in 1234

    Expires in 03/2026

  • Discover ending in 1234

    Expires in 07/2020 This card is expired.

  • American Express ending in 1234

    Expires in 12/2021

  • Paypal Express ending in 1234

    Expires in 10/2021

<div class="row">
<!-- col -->
    <div class="col-12">
       <div class="p-4">
          <!-- heading -->
          <div class="d-flex justify-content-between mb-6 align-items-center">
             <h2 class="mb-0">Payment Methods</h2>
             <a href="#" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#paymentModal">Add
             Payment </a>
          </div>
          <ul class="list-group list-group-flush">
             <!-- List group item -->
             <li class="list-group-item py-5">
                <div class="d-flex justify-content-between">
                   <div class="d-flex">
                      <!-- img -->
                      <img src="../../assets/images/svg-graphics/visa.svg" alt="">
                      <!-- text -->
                      <div class="ms-4">
                          <h5 class="mb-0 h6 h6">**** 1234</h5>
                         <p class="mb-0 small">Expires in 10/2023
                        </p>
                      </div>
                   </div>
                   <div>
                      <!-- button -->
                      <a href="#" class="btn btn-outline-gray-400 disabled btn-sm">Remove</a>
                   </div>
                </div>
             </li>
             <!-- List group item -->
             <li class="list-group-item py-5">
                <div class="d-flex justify-content-between">
                   <div class="d-flex">
                      <!-- img -->
                      <img src="../../assets/images/svg-graphics/mastercard.svg" alt="" class="me-3">
                      <div>
                       <h5 class="mb-0 h6">Mastercard ending in 1234</h5>
                       <p class="mb-0 small">Expires in 03/2026</p>
                      </div>
                   </div>
                   <div>
                      <!-- button-->
                      <a href="#" class="btn btn-outline-gray-400 text-muted btn-sm">Remove</a>
                   </div>
                </div>
             </li>
             <!-- List group item -->
             <li class="list-group-item py-5">
                <div class="d-flex justify-content-between">
                   <div class="d-flex">
                      <!-- img -->
                      <img src="../../assets/images/svg-graphics/discover.svg" alt="" class="me-3">
                      <div>
                          <!-- text -->
                                <h5 class="mb-0 h6">Discover ending in 1234</h5>
                             <p class="mb-0 small">Expires in 07/2020 <span class="badge bg-warning text-dark"> This card is
                           expired.</span>
                         </p>
                      </div>
                   </div>
                   <div>
                      <!-- btn -->
                      <a href="#" class="btn btn-outline-gray-400 text-muted btn-sm">Remove</a>
                   </div>
                </div>
             </li>
             <!-- List group item -->
             <li class="list-group-item py-5">
                <div class="d-flex justify-content-between">
                   <div class="d-flex">
                      <!-- img -->
                      <img src="../../assets/images/svg-graphics/americanexpress.svg" alt="" class="me-3">
                      <!-- text -->
                      <div>
                         <h5 class="mb-0 h6">American Express ending in 1234</h5>
                        <p class="mb-0 small">Expires in 12/2021</p>
                      </div>
                   </div>
                   <div>
                      <!-- btn -->
                      <a href="#" class="btn btn-outline-gray-400 text-muted btn-sm">Remove</a>
                   </div>
                </div>
             </li>
             <!-- List group item -->
             <li class="list-group-item py-5 border-bottom">
                <div class="d-flex justify-content-between">
                   <div class="d-flex">
                      <!-- img -->
                      <img src="../../assets/images/svg-graphics/paypal.svg" alt="" class="me-3">
                      <div>
                       <!-- text -->
                        <h5 class="mb-0 h6">Paypal Express ending in 1234</h5>
                         <p class="mb-0 small">Expires in 10/2021</p>
                      </div>
                   </div>
                   <div>
                      <!-- btn -->
                      <a href="#" class="btn btn-outline-gray-400 text-muted btn-sm">Remove</a>
                   </div>
                </div>
             </li>
          </ul>
       </div>
    </div>
                         </div>

List #2

<div class="row">
 <div class="col-12">
       <div class="py-3">
          <!-- alert -->
          <div class="alert alert-danger p-2" role="alert">
             You’ve got FREE delivery. Start <a href="#!" class="alert-link">checkout now!</a>
          </div>
          <ul class="list-group list-group-flush">
             <!-- list group -->
             <li class="list-group-item py-3 py-lg-0 px-0 border-top">
                <!-- row -->
                <div class="row align-items-center">
                   <div class="col-3 col-md-2">
                      <!-- img --> <img src="../../assets/images/products/product-img-1.jpg" alt="Ecommerce" class="img-fluid">
                   </div>
                   <div class="col-4 col-md-5">
                      <!-- title -->
                      <a href="#!" class="text-inherit">
                        <h6 class="mb-0">Haldiram's Sev Bhujia</h6>
                      </a>
                      <span><small class="text-muted">.98 / lb</small></span>
                      <!-- text -->
                      <div class="mt-2 small lh-1">
                    <a href="#!" class="text-decoration-none text-inherit">
                        <span class="me-1 align-text-bottom">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 text-success">
                            <polyline points="3 6 5 6 21 6"></polyline>
                            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
                            </path>
                            <line x1="10" y1="11" x2="10" y2="17"></line>
                            <line x1="14" y1="11" x2="14" y2="17"></line>
                        </svg>
                        </span>
                        <span class="text-muted">Remove</span>
                    </a>
                     </div>
                    </div>
                   <!-- input group -->
                   <div class="col-3 col-md-3 col-lg-2">
                      <!-- input -->
                      <div class="input-group input-spinner  ">
                    <input type="button" value="-" class="button-minus  btn  btn-sm " data-field="quantity">
                    <input type="number" step="1" max="10" value="1" name="quantity" class="quantity-field form-control-sm form-input   ">
                    <input type="button" value="+" class="button-plus btn btn-sm " data-field="quantity">
                      </div>
                   </div>
                   <!-- price -->
                   <div class="col-2 text-lg-end text-start text-md-end col-md-2">
                      <span class="fw-bold">$5.00</span>
                   </div>
                </div>
             </li>
             <!-- list group -->
             <li class="list-group-item py-3 py-lg-0 px-0">
                <!-- row -->
                <div class="row align-items-center">
                   <div class="col-3 col-md-2">
                      <!-- img --> <img src="../../assets/images/products/product-img-2.jpg" alt="Ecommerce" class="img-fluid">
                   </div>
                   <div class="col-4 col-md-5">
                      <!-- title -->
                      <a href="#!" class="text-inherit">
                   <h6 class="mb-0">NutriChoice Digestive </h6>
                      </a>
                      <span><small class="text-muted">250g</small></span>
                      <!-- text -->
                      <div class="mt-2 small lh-1">
                   <a href="#!" class="text-decoration-none text-inherit">
                  <span class="me-1 align-text-bottom">
                     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 text-success">
                          <polyline points="3 6 5 6 21 6"></polyline>
                            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
                           </path>
                          <line x1="10" y1="11" x2="10" y2="17"></line>
                         <line x1="14" y1="11" x2="14" y2="17"></line>
                       </svg>
                     </span>
                     <span class="text-muted">Remove</span>
                    </a>
                      </div>
                   </div>
                   <!-- input group -->
                   <div class="col-3 col-md-3 col-lg-2">
                      <!-- input -->
                      <div class="input-group input-spinner  ">
                        <input type="button" value="-" class="button-minus  btn  btn-sm " data-field="quantity">
                     <input type="number" step="1" max="10" value="1" name="quantity" class="quantity-field form-control-sm form-input   ">
                    <input type="button" value="+" class="button-plus btn btn-sm " data-field="quantity">
                      </div>
                   </div>
                   <!-- price -->
                   <div class="col-2 text-lg-end text-start text-md-end col-md-2">
                      <span class="fw-bold text-danger">$20.00</span>
                      <div class="text-decoration-line-through text-muted small">$26.00</div>
                   </div>
                </div>
             </li>
             <!-- list group -->
             <li class="list-group-item py-3 py-lg-0 px-0">
                <!-- row -->
                <div class="row align-items-center">
                   <div class="col-3 col-md-2">
                      <!-- img --> <img src="../../assets/images/products/product-img-3.jpg" alt="Ecommerce" class="img-fluid">
                   </div>
                   <div class="col-4 col-md-5">
                      <!-- title -->
                      <a href="#!" class="text-inherit">
                  <h6 class="mb-0">Cadbury 5 Star Chocolate</h6>
                      </a>
                      <span><small class="text-muted">1 kg</small></span>
                      <!-- text -->
                      <div class="mt-2 small lh-1">
                    <a href="#!" class="text-decoration-none text-inherit">
                        <span class="me-1 align-text-bottom">
                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 text-success">
              <polyline points="3 6 5 6 21 6"></polyline>
            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
                </path>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                      <line x1="14" y1="11" x2="14" y2="17"></line>
                      </svg>
                       </span>
                     <span class="text-muted">Remove</span>
                       </a>
                      </div>
                   </div>
                   <!-- input group -->
                   <div class="col-3 col-md-3 col-lg-2">
                      <!-- input -->
                      <div class="input-group input-spinner  ">
                         <input type="button" value="-" class="button-minus  btn  btn-sm " data-field="quantity">
                         <input type="number" step="1" max="10" value="1" name="quantity" class="quantity-field form-control-sm form-input   ">
                       <input type="button" value="+" class="button-plus btn btn-sm " data-field="quantity">
                      </div>
                   </div>
                   <!-- price -->
                   <div class="col-2 text-lg-end text-start text-md-end col-md-2">
                      <span class="fw-bold">$15.00</span>
                      <div class="text-decoration-line-through text-muted small">$20.00</div>
                   </div>
                </div>
             </li>
             <!-- list group -->
             <li class="list-group-item py-3 py-lg-0 px-0">
                <!-- row -->
                <div class="row align-items-center">
                   <div class="col-3 col-md-2">
                      <!-- img --> <img src="../../assets/images/products/product-img-4.jpg" alt="Ecommerce" class="img-fluid">
                   </div>
                   <div class="col-4 col-md-5">
                      <!-- title -->
                      <a href="#!" class="text-inherit">
                     <h6 class="mb-0">Onion Flavour Potato</h6>
                      </a>
                      <span><small class="text-muted">250g</small></span>
                      <!-- text -->
                      <div class="mt-2 small lh-1">
                     <a href="#!" class="text-decoration-none text-inherit">
                         <span class="me-1 align-text-bottom">
                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 text-success">
                                  <polyline points="3 6 5 6 21 6"></polyline>
                                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
                                   </path>
                                  <line x1="10" y1="11" x2="10" y2="17"></line>
                               <line x1="14" y1="11" x2="14" y2="17"></line>
                             </svg>
                            </span>
                          <span class="text-muted">Remove</span>
                        </a>
                      </div>
                   </div>
                   <!-- input group -->
                   <div class="col-3 col-md-3 col-lg-2">
                      <!-- input -->
                      <div class="input-group input-spinner  ">
                         <input type="button" value="-" class="button-minus  btn  btn-sm " data-field="quantity">
                         <input type="number" step="1" max="10" value="1" name="quantity" class="quantity-field form-control-sm form-input   ">
                       <input type="button" value="+" class="button-plus btn btn-sm " data-field="quantity">
                      </div>
                   </div>
                   <!-- price -->
                   <div class="col-2 text-lg-end text-start text-md-end col-md-2">
                      <span class="fw-bold">$15.00</span>
                      <div class="text-decoration-line-through text-muted small">$20.00</div>
                   </div>
                </div>
             </li>
             <!-- list group -->
             <li class="list-group-item py-3 py-lg-0 px-0 border-bottom">
                <!-- row -->
                <div class="row align-items-center">
                   <div class="col-3 col-md-2">
                      <!-- img --> <img src="../../assets/images/products/product-img-5.jpg" alt="Ecommerce" class="img-fluid">
                   </div>
                   <div class="col-4 col-md-5">
                      <!-- title -->
                      <a href="#!" class="text-inherit">
                    <h6 class="mb-0">Salted Instant Popcorn </h6>
                      </a>
                      <span><small class="text-muted">100g</small></span>
                      <!-- text -->
                      <div class="mt-2 small lh-1">
                     <a href="#!" class="text-decoration-none text-inherit">
                          <span class="me-1 align-text-bottom">
                         <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2 text-success">
                         <polyline points="3 6 5 6 21 6"></polyline>
                               <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
                           </path>
                               <line x1="10" y1="11" x2="10" y2="17"></line>
                               <line x1="14" y1="11" x2="14" y2="17"></line>
                          </svg>
                           </span>
                          <span class="text-muted">Remove</span>
                         </a>
                      </div>
                   </div>
                   <!-- input group -->
                   <div class="col-3 col-md-3 col-lg-2">
                      <!-- input -->
                      <div class="input-group input-spinner  ">
                        <input type="button" value="-" class="button-minus  btn  btn-sm " data-field="quantity">
                     <input type="number" step="1" max="10" value="1" name="quantity" class="quantity-field form-control-sm form-input   ">
                     <input type="button" value="+" class="button-plus btn btn-sm " data-field="quantity">
                      </div>
                   </div>
                   <!-- price -->
                   <div class="col-2 text-lg-end text-start text-md-end col-md-2">
                      <span class="fw-bold">$15.00</span>
                      <div class="text-decoration-line-through text-muted small">$25.00</div>
                   </div>
                </div>
             </li>
          </ul>
          <!-- btn -->
          <div class="d-flex justify-content-between mt-4">
             <a href="#!" class="btn btn-primary">Continue Shopping</a>
             <a href="#!" class="btn btn-dark">Update Cart</a>
          </div>
       </div>
    </div>
                         </div>

List #3

Download the FreshCart App to your Phone.

Return Policy customers can return a product and ask for a refund.

Order now so you don t miss the opportunities.

Your order will arrive at your door in 15 minutes.

<div class="row">
<div class="col-lg-6">
	<div class="card mb-6">
		<div class="card-body d-flex align-items-center">
			<div>
				<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="var(--fc-primary)" class="bi bi-phone" viewBox="0 0 16 16">
					<path d="M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z" />
					<path d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
				</svg>
			</div>
			<div class="ms-3">
				<p class="mb-0 small">Download the FreshCart App to your Phone.</p>
			</div>
		</div>
		<div class="card-body d-flex align-items-center border-top">
			<div>
				<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="var(--fc-primary)" class="bi bi-reply" viewBox="0 0 16 16">
					<path
						d="M6.598 5.013a.144.144 0 0 1 .202.134V6.3a.5.5 0 0 0 .5.5c.667 0 2.013.005 3.3.822.984.624 1.99 1.76 2.595 3.876-1.02-.983-2.185-1.516-3.205-1.799a8.74 8.74 0 0 0-1.921-.306 7.404 7.404 0 0 0-.798.008h-.013l-.005.001h-.001L7.3 9.9l-.05-.498a.5.5 0 0 0-.45.498v1.153c0 .108-.11.176-.202.134L2.614 8.254a.503.503 0 0 0-.042-.028.147.147 0 0 1 0-.252.499.499 0 0 0 .042-.028l3.984-2.933zM7.8 10.386c.068 0 .143.003.223.006.434.02 1.034.086 1.7.271 1.326.368 2.896 1.202 3.94 3.08a.5.5 0 0 0 .933-.305c-.464-3.71-1.886-5.662-3.46-6.66-1.245-.79-2.527-.942-3.336-.971v-.66a1.144 1.144 0 0 0-1.767-.96l-3.994 2.94a1.147 1.147 0 0 0 0 1.946l3.994 2.94a1.144 1.144 0 0 0 1.767-.96v-.667z"
					/>
				</svg>
			</div>
			<div class="ms-3">
				<p class="mb-0 small">Return Policy customers can return a product and ask for a refund.</p>
			</div>
		</div>
		<div class="card-body d-flex align-items-center border-top">
			<div>
				<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="var(--fc-primary)" class="bi bi-bag-check" viewBox="0 0 16 16">
					<path fill-rule="evenodd" d="M10.854 8.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708 0z" />
					<path
						d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z"
					/>
				</svg>
			</div>
			<div class="ms-3">
				<p class="mb-0 small">Order now so you don t miss the opportunities.</p>
			</div>
		</div>
		<div class="card-body d-flex align-items-center border-top">
			<div>
				<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="var(--fc-primary)" class="bi bi-clock-history" viewBox="0 0 16 16">
					<path
						d="M8.515 1.019A7 7 0 0 0 8 1V0a8 8 0 0 1 .589.022l-.074.997zm2.004.45a7.003 7.003 0 0 0-.985-.299l.219-.976c.383.086.76.2 1.126.342l-.36.933zm1.37.71a7.01 7.01 0 0 0-.439-.27l.493-.87a8.025 8.025 0 0 1 .979.654l-.615.789a6.996 6.996 0 0 0-.418-.302zm1.834 1.79a6.99 6.99 0 0 0-.653-.796l.724-.69c.27.285.52.59.747.91l-.818.576zm.744 1.352a7.08 7.08 0 0 0-.214-.468l.893-.45a7.976 7.976 0 0 1 .45 1.088l-.95.313a7.023 7.023 0 0 0-.179-.483zm.53 2.507a6.991 6.991 0 0 0-.1-1.025l.985-.17c.067.386.106.778.116 1.17l-1 .025zm-.131 1.538c.033-.17.06-.339.081-.51l.993.123a7.957 7.957 0 0 1-.23 1.155l-.964-.267c.046-.165.086-.332.12-.501zm-.952 2.379c.184-.29.346-.594.486-.908l.914.405c-.16.36-.345.706-.555 1.038l-.845-.535zm-.964 1.205c.122-.122.239-.248.35-.378l.758.653a8.073 8.073 0 0 1-.401.432l-.707-.707z"
					/>
					<path d="M8 1a7 7 0 1 0 4.95 11.95l.707.707A8.001 8.001 0 1 1 8 0v1z" />
					<path d="M7.5 3a.5.5 0 0 1 .5.5v5.21l3.248 1.856a.5.5 0 0 1-.496.868l-3.5-2A.5.5 0 0 1 7 9V3.5a.5.5 0 0 1 .5-.5z" />
				</svg>
			</div>
			<div class="ms-3">
				<p class="mb-0 small">Your order will arrive at your door in 15 minutes.</p>
			</div>
		</div>
	</div>
</div>
</div>