vvveb-cms/static/Vvvebjs/demo/landing/sections/pricing-table/pricing-table-4.html

<section class="pricing-table-4 my-3" aria-label="pricing-table-4">
  <div class="container py-4 py-lg-6">
    <div class="row g-4  ">
      <div class="col-lg-4 col-xl-5">
        <div class="  card h-100 px-xl-3 border-0 py-lg-4 " style="" id="">
          <div class=" mb-2">
            <div editable="rich">
              <h1 class="fw-bolder">Our Plans</h1>
            </div>
          </div>
          <div class="">
            <div editable="rich">
              <p class="lead text-dark">Lorem ipsum dolor sit amet.</p>
            </div>
          </div>
          <div class="">
            <div editable="rich">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid quasi, blanditiis sed!
                <br>Facere laborum debitis veritatis vel ex enim, eligendi distinctio, quidem esse accusantium amet facilis dolore ea impedit alias..
              </p>
            </div>
          </div>
          <div class=" bg-primary">
            <img style="mix-blend-mode:overlay" class="img-fluid" src="demo/img/team-1.jpg" alt="Team 2" loading="lazy">
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-xl-3 ms-auto text-center my-lg-auto">
        <div class=" card px-xl-3 border py-lg-4" style="" id="">
          <div class="card-body d-flex flex-column justify-content-between">
            <div>
              <div class=" mb-4">
                <div editable="rich">
                  <h3>Basic</h3>
                </div>
              </div>
              <div class=" mb-4 bg-body-tertiary  text-dark rounded py-3 ">
                <h3 editable="inline" class="fw-bolder d-inline small">$</h3>
                <h3 editable="inline" class="fw-bolder d-inline rfs-30 ls-n2">19</h3>
                <span class="opacity-50" editable="inline">/ Year</span>
              </div>
              <div class=" mb-2">
                <div class="d-inline-flex w-100 gap-2 ">
                  <div>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
                      <path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
                    </svg>
                  </div>

                  <div editable="rich">
                    <p class="text-start">Consectetur similique</p>
                  </div>
                </div>
              </div>
              <div class=" mb-2">
                <div class="d-inline-flex w-100 gap-2 ">
                  <div>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
                      <path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
                    </svg>
                  </div>

                  <div editable="rich">
                    <p class="text-start">Consectetur similique</p>
                  </div>
                </div>
              </div>
              <div class=" mb-2">
                <div class="d-inline-flex w-100 gap-2 ">
                  <div>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
                      <path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
                    </svg>
                  </div>

                  <div editable="rich">
                    <p class="text-start">Consectetur similique</p>
                  </div>
                </div>
              </div>
              <div class=" mb-2">
                <div class="d-inline-flex w-100 gap-2 ">
                  <div>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
                      <path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
                    </svg>
                  </div>

                  <div editable="rich">
                    <p class="text-start">Consectetur similique</p>
                  </div>
                </div>
              </div>
              <div class=" mb-2">
                <div class="d-inline-flex w-100 gap-2 ">
                  <div>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
                      <path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
                    </svg>
                  </div>

                  <div editable="rich">
                    <p class="text-start">Consectetur similique</p>
                  </div>
                </div>
              </div>
              <div class=" mb-2">
                <div class="d-inline-flex w-100 gap-2 ">
                  <div>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
                      <path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
                    </svg>
                  </div>

                  <div editable="rich">
                    <p class="text-start">Consectetur similique</p>
                  </div>
                </div>
              </div>

            </div>
            <div class=" d-grid">
              <a class="btn btn-primary" href="#" role="button">Subscribe</a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-xl-3 text-center">
        <div class=" card h-100 px-xl-3 border py-lg-5" style="" id="">
          <div class="card-body d-flex flex-column justify-content-between">
            <div>
              <div class=" mb-4">
                <div editable="rich">
                  <h3>Professional</h3>
                </div>
              </div>
              <div class=" mb-4 bg-body-tertiary  text-dark rounded py-3 ">
                <h3 editable="inline" class="fw-bolder d-inline small">$</h3>
                <h3 editable="inline" class="fw-bolder d-inline rfs-30 ls-n2">149</h3>
                <span class="opacity-50" editable="inline">/ Year</span>
              </div>
              <div class=" mb-2">
                <div class="d-inline-flex w-100 gap-2 ">
                  <div>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
                      <path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
                    </svg>
                  </div>

                  <div editable="rich">
                    <p class="text-start">Consectetur similique</p>
                  </div>
                </div>
              </div>
              <div class=" mb-2">
                <div class="d-inline-flex w-100 gap-2 ">
                  <div>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
                      <path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
                    </svg>
                  </div>

                  <div editable="rich">
                    <p class="text-start">Consectetur similique</p>
                  </div>
                </div>
              </div>
              <div class=" mb-2">
                <div class="d-inline-flex w-100 gap-2 ">
                  <div>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
                      <path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
                    </svg>
                  </div>

                  <div editable="rich">
                    <p class="text-start">Consectetur similique</p>
                  </div>
                </div>
              </div>
              <div class=" mb-2">
                <div class="d-inline-flex w-100 gap-2 ">
                  <div>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
                      <path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
                    </svg>
                  </div>

                  <div editable="rich">
                    <p class="text-start">Consectetur similique</p>
                  </div>
                </div>
              </div>
              <div class=" mb-2">
                <div class="d-inline-flex w-100 gap-2 ">
                  <div>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
                      <path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
                    </svg>
                  </div>

                  <div editable="rich">
                    <p class="text-start">Consectetur similique</p>
                  </div>
                </div>
              </div>
              <div class=" mb-2">
                <div class="d-inline-flex w-100 gap-2 ">
                  <div>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
                      <path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
                    </svg>
                  </div>

                  <div editable="rich">
                    <p class="text-start">Consectetur similique</p>
                  </div>
                </div>
              </div>
              <div class=" mb-2">
                <div class="d-inline-flex w-100 gap-2 ">
                  <div>
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1em" height="1em" viewBox="0 0 24 24" lc-helper="svg-icon" fill="currentColor" class="">
                      <path d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"></path>
                    </svg>
                  </div>

                  <div editable="rich">
                    <p class="text-start">Consectetur similique</p>
                  </div>
                </div>
              </div>

            </div>
            <div class=" d-grid">
              <a class="btn btn-primary" href="#" role="button">Subscribe</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>