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
You’ve got FREE delivery. Start
checkout now!
<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>
