Bootstrap 5 Components

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

Great for quick projects and for testing everything Shuffle can do. One-time payment, not a subscription.

New to Shuffle? Try our tools:

Multi-AI Designer Kick off several design directions at once, then build on your favorite. Visual Editor Build from UI components and templates, then customize every detail.

Components

Bootstrap Component #3361

Bootstrap

Vista

<section class="py-12 py-lg-24 bg-danger-dark">
  <div class="container">
    <div class="mw-xl mx-auto mw-lg-none">
      <div class="text-center mb-20">
        <h4 class="font-heading mb-6">FAQ</h4>
        <p class="text-white text-opacity-50 mb-0">Everything you need to know about the product and billing.</p>
      </div>
      <div class="row mb-20">
        <div class="col-lg-6 mb-12">
          <div class="pt-12 border-top border-white border-opacity-10">
            <div class="mw-lg">
              <h6 class="fs-7 mb-2">How to add company details on my invoice?</h6>
              <p class="text-white text-opacity-50">Solstice is a platform to study community and a virtual study space When part of our community you will be able to study live with other students from all around the globe.</p>
            </div>
          </div>
        </div>
        <div class="col-lg-6 mb-12">
          <div class="pt-12 border-top border-white border-opacity-10">
            <div class="mw-lg">
              <h6 class="fs-7 mb-2">Can I upgrade or downgrade at any time?</h6>
              <p class="text-white text-opacity-50">Solstice is a platform to study community and a virtual study space When part of our community you will be able to study live with other students from all around the globe.</p>
            </div>
          </div>
        </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3362

Bootstrap

Vista

<section class="position-relative py-12 py-md-24 bg-danger-dark">
  <div class="container">
    <div class="mw-md mw-lg-4xl mw-xl-5xl mx-auto py-14 py-sm-20 px-8 bg-gradient-danger-bottom rounded-2" style="padding: 2px;">
      <div class="text-center">
        <h3 class="font-heading mb-4">Join our newsletter</h3>
        <p class="mw-xs mx-auto mw-md-none text-white text-opacity-50 mb-12">Get the latest updates delivered into your inbox.</p>
        <div class="position-relative mw-sm mx-auto mb-5" style="height: 48px;">
          <div class="bg-danger bg-opacity-75" style="height: 48px; filter: blur(25px);"></div>
          <div class="position-absolute w-100 top-0 start-0" style="height: 48px;">
            <input class="form-control bg-danger-dark bg-opacity-75 h-100" type="" placeholder="Email address">
            <div class="position-absolute top-0 end-0 h-100 p-1 d-flex align-items-center">
              <button class="btn h-100 d-flex align-items-center py-2 px-4 text-danger-dark btn-light border-2 border-dark border-opacity-10" type="submit">Subscribe</button>
            </div>
          </div>
        </div>
        <p class="fs-9 text-white text-opacity-50 mb-0">No spam. You can unsubscribe anytime.</p>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3363

Bootstrap

Vista

<section class="position-relative py-12 py-lg-24 bg-danger-dark">
  <div class="container">
    <div class="mw-md mw-lg-none mx-auto">
      <div class="text-center mb-20"><span class="badge mb-6 text-danger-light" style="letter-spacing: 1.44px;">FEATURES</span>
        <h3 class="font-heading mb-6">Designed for the modern business owners</h3>
        <p class="mw-xl mx-auto fs-7 text-white text-opacity-50 mb-0">Our software provides intuitive bookkeeping solutions, allowing you to focus on growing your business rather than crunching numbers.</p>
      </div>
      <div class="row mb-n8">
        <div class="col-12 col-lg-7 mb-8">
          <div class="h-100 py-10 px-8 px-sm-20 py-6 text-center bg-danger bg-opacity-10 rounded-2"><img class="img-fluid d-block w-100 mx-auto mb-8 rounded-2" style="height: 274px;" src="vista-assets/images/features/picture-pink5.png" alt=""><span class="d-block fs-6 fw-medium">Simple Accounting</span></div>
        </div>
        <div class="col-12 col-lg-5 mb-8">
          <div class="h-100 py-10 px-8 px-sm-20 py-6 text-center bg-danger bg-opacity-10 rounded-2"><img class="img-fluid d-block w-100 mx-auto mb-8 rounded-2" style="height: 274px;" src="vista-assets/images/features/picture-pink6.png" alt=""><span class="d-block fs-6 fw-medium">Detailed Analytics</span></div>
        </div>
        <div class="col-12 col-lg-5 mb-8">
          <div class="h-100 py-10 px-8 px-sm-20 py-6 text-center bg-danger bg-opacity-10 rounded-2"><img class="img-fluid d-block w-100 mx-auto mb-8 rounded-2" style="height: 274px;" src="vista-assets/images/features/picture-pink7.png" alt=""><span class="d-block fs-6 fw-medium">Multiple Accounts</span></div>
        </div>
        <div class="col-12 col-lg-7 mb-8">
          <div class="h-100 py-10 px-8 px-sm-20 py-6 text-center bg-danger bg-opacity-10 rounded-2"><img class="img-fluid d-block w-100 mx-auto mb-8 rounded-2" style="height: 274px;" src="vista-assets/images/features/picture-pink8.png" alt=""><span class="d-block fs-6 fw-medium">Cloud-Based Financial System</span></div>
        </div>
      </div>
      <div class="mt-20 text-center"><a class="btn d-inline-flex align-items-center text-danger-dark btn-light border border-white border-opacity-10" href="#"><span class="me-2">Get Started</span>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5.5 3L10.5 8L5.5 13" stroke="#2E0F17" style="stroke:#2E0F17;stroke:color(display-p3 0.1794 0.0598 0.0891);stroke-opacity:1;" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3364

Bootstrap

Vista

<section class="position-relative py-24 bg-primary-dark">
  <div class="container">
    <div class="border-bottom border-white border-opacity-10 mb-20">
      <div class="row">
        <div class="col-lg-8 mb-8 mb-lg-0">
          <div class="d-flex flex-wrap gap-6 gap-lg-10"><a class="position-relative btn text-primary px-0 pt-0 pb-4 border-0" href="#"><span>Trending</span>
              <div class="position-absolute bottom-0 start-0 w-100 border-bottom border-2 border-primary"></div></a><a class="position-relative btn text-secondary fw-normal px-0 pt-0 pb-4 border-0" href="#"><span>Accounting</span></a><a class="position-relative btn text-secondary fw-normal px-0 pt-0 pb-4 border-0" href="#"><span>Entrepreneurship</span></a><a class="position-relative btn text-secondary fw-normal px-0 pt-0 pb-4 border-0" href="#"><span>Payments</span></a><a class="position-relative btn text-secondary fw-normal px-0 pt-0 pb-4 border-0" href="#"><span>Company</span></a></div>
        </div>
        <div class="col-lg-4">
          <div class="position-relative d-flex ms-auto align-items-center" style="max-width: 100px;">
            <button class="position-absolute top-50 start-0 ms-1 translate-middle-y btn p-0 border-0">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.58335 17.5C13.9556 17.5 17.5 13.9556 17.5 9.58335C17.5 5.2111 13.9556 1.66669 9.58335 1.66669C5.2111 1.66669 1.66669 5.2111 1.66669 9.58335C1.66669 13.9556 5.2111 17.5 9.58335 17.5Z" stroke="#918889" style="stroke:#918889;stroke:color(display-p3 0.5668 0.5332 0.5374);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M18.3334 18.3334L16.6667 16.6667" stroke="#918889" style="stroke:#918889;stroke:color(display-p3 0.5668 0.5332 0.5374);stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </button>
            <input class="form-control ps-10 py-2 pe-0 bg-transparent border-0" type="search" placeholder="Search">
          </div>
        </div>
      </div>
    </div>
    <div class="mw-lg mx-auto mw-lg-none"><a class="btn mb-20 d-block p-0 text-start fw-normal bg-primary bg-opacity-10 rounded-2 overflow-hidden" href="#">
        <div class="row">
          <div class="col-lg-6 p-0"><img class="img-fluid d-block mb-12 w-100 h-100" src="vista-assets/images/blog-content/placeholder-blue.png" alt=""></div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3365

Bootstrap

Vista

<section class="position-relative py-12 py-lg-24 bg-primary-dark overflow-hidden">
  <div class="container">
    <div class="text-center mb-20">
      <h3 class="font-heading text-gradient mb-4">Flexible pricing plan</h3>
      <p class="text-white text-opacity-50 mb-10">Pricing that scales with your business immediately.</p>
      <div class="d-inline-flex p-1 mb-4 rounded-pill bg-white bg-opacity-10 border-white border-opacity-25">
        <button class="btn py-1 px-3 fs-10 rounded-pill">Monthly</button>
        <button class="btn py-1 px-3 fs-10 bg-white bg-opacity-10 border-white border-opacity-10 rounded-pill"><span>Yearly</span><span class="ms-1 bg-primary text-gradient">10% OFF</span></button>
      </div>
      <p class="mb-0 fs-10 text-white text-opacity-50">No credit card required</p>
    </div>
    <div class="position-relative mw-sm mw-lg-5xl mx-auto">
      <div class="position-absolute top-50 start-50 translate-middle py-24 px-32 bg-primary rounded-pill" style="filter: blur(200px);"></div>
      <div class="row position-relative align-items-end">
        <div class="col-lg-4 mb-8 mb-lg-0">
          <div class="p-8 bg-primary-dark bg-opacity-75 rounded-2" style="box-shadow: 1px -1px 1px 1px rgba(80, 106, 138, 0.10);">
            <h6 class="fs-5 mb-6">Basic</h6>
            <div class="d-flex mb-8 align-items-end"><span class="fs-2 fw-semibold lh-1">$9</span><span class="ms-1 text-white text-opacity-50">/per month</span></div><a class="btn mb-8 d-inline-flex align-items-center text-primary-dark btn-light border-2 border-dark border-opacity-25" href="#">Get started</a>
            <div class="pt-8 border-top border-white border-opacity-10">
              <ul class="list-unstyled mb-0">
                <li class="d-flex mb-3 align-items-center">
                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g opacity="0.5">
                      <path d="M13.3333 3.54163C13.3333 4.57496 12.4917 5.41663 11.4583 5.41663H8.54166C8.02499 5.41663 7.55832 5.20829 7.21666 4.86663C6.87499 4.52496 6.66666 4.05829 6.66666 3.54163C6.66666 2.50829 7.50832 1.66663 8.54166 1.66663H11.4583C11.975 1.66663 12.4417 1.87496 12.7833 2.21663C13.125 2.55829 13.3333 3.02496 13.3333 3.54163Z" fill="white" style="fill:white;fill-opacity:1;"></path>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3366

Bootstrap

Vista

<section class="position-relative pb-12 pb-lg-24 bg-primary-dark">
  <div class="container">
    <div class="py-7 mb-16 mb-sm-24 border-bottom border-white border-opacity-10">
      <div class="row">
        <div class="col-sm-6 mb-8 mb-sm-0">
          <div class="d-flex align-items-center"><img class="img-fluid" style="height: 24px;" src="vista-assets/images/logos/vista-logo-small.svg" alt=""><span class="mx-8">
              <svg width="1" height="24" viewBox="0 0 1 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <line x1="0.5" y1="24" x2="0.5" stroke="white" style="stroke:white;stroke-opacity:1;"></line>
              </svg></span><span class="fw-semibold">Careers</span></div>
        </div>
        <div class="col-sm-6 text-sm-end"><a class="btn p-0 fs-9 border-0" href="#"><span class="me-2">View openings</span>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5.5 3L10.5 8L5.5 13" stroke="white" style="stroke:white;stroke-opacity:1;" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a></div>
      </div>
    </div>
    <div class="mw-5xl mx-auto">
      <div class="row align-items-center">
        <div class="col-md-8 col-lg-6 mt-12 mt-md-0 order-last order-md-first">
          <h2 class="font-heading mb-6">Careers at Vista</h2><a class="btn d-inline-flex align-items-center text-primary-dark btn-light border-2 border-secondary border-opacity-25" href="#">View Openings </a>
        </div>
        <div class="col-md-4 col-lg-6">
          <div class="d-flex justify-content-md-end">
            <div class="position-relative" style="width: 67px;">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3367

Bootstrap

Vista

<section class="position-relative py-12 py-lg-24 bg-primary-dark">
  <div class="container">
    <div class="mw-5xl mx-auto text-center mb-20"><span class="badge mb-4 text-primary-light" style="letter-spacing: 1.44px;">FEATURES</span>
      <h3 class="font-heading mb-4">Designed for the modern business owners</h3>
      <p class="mw-2xl mx-auto fs-7 text-white text-opacity-75 mb-0">Our software provides intuitive bookkeeping solutions, allowing you to focus on growing your business rather than crunching numbers.</p>
    </div>
    <div class="mw-xs mw-sm-none mx-auto">
      <div class="row mb-n8">
        <div class="col-sm-6 col-lg-3 mb-8">
          <div class="h-100 ps-6 pe-12 py-6 bg-primary bg-opacity-10 rounded-2">
            <div class="d-flex mb-4 align-items-center justify-content-center border border-primary rounded-pill" style="width: 40px; height: 40px;">
              <div class="d-flex align-items-center justify-content-center bg-dark bg-opacity-10 border border-white border-opacity-10 rounded-pill" style="width: 32px; height: 32px;">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.3334 2.66675H4.66671C2.66671 2.66675 1.33337 3.66675 1.33337 6.00008V8.37341C1.33337 8.62008 1.58671 8.77341 1.80671 8.67341C2.46004 8.37341 3.21337 8.26008 4.00671 8.40008C5.76004 8.71341 7.04671 10.3401 7.00004 12.1201C6.99337 12.4001 6.95337 12.6734 6.88004 12.9401C6.82671 13.1467 6.99337 13.3401 7.20671 13.3401H11.3334C13.3334 13.3401 14.6667 12.3401 14.6667 10.0067V6.00008C14.6667 3.66675 13.3334 2.66675 11.3334 2.66675ZM8.00004 9.66675C7.08004 9.66675 6.33337 8.92008 6.33337 8.00008C6.33337 7.08008 7.08004 6.33341 8.00004 6.33341C8.92004 6.33341 9.66671 7.08008 9.66671 8.00008C9.66671 8.92008 8.92004 9.66675 8.00004 9.66675ZM12.8334 9.33341C12.8334 9.60675 12.6067 9.83341 12.3334 9.83341C12.06 9.83341 11.8334 9.60675 11.8334 9.33341V6.66675C11.8334 6.39341 12.06 6.16675 12.3334 6.16675C12.6067 6.16675 12.8334 6.39341 12.8334 6.66675V9.33341Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                  <path d="M3.33329 9.33325C1.85996 9.33325 0.666626 10.5266 0.666626 11.9999C0.666626 12.4999 0.806626 12.9733 1.05329 13.3733C1.51329 14.1466 2.35996 14.6666 3.33329 14.6666C4.30663 14.6666 5.15329 14.1466 5.61329 13.3733C5.85996 12.9733 5.99996 12.4999 5.99996 11.9999C5.99996 10.5266 4.80663 9.33325 3.33329 9.33325ZM4.64663 11.7799L3.22663 13.0933C3.13329 13.1799 3.00663 13.2266 2.88663 13.2266C2.75996 13.2266 2.63329 13.1799 2.53329 13.0799L1.87329 12.4199C1.67996 12.2266 1.67996 11.9066 1.87329 11.7133C2.06663 11.5199 2.38663 11.5199 2.57996 11.7133L2.89996 12.0333L3.96663 11.0466C4.16663 10.8599 4.48663 10.8733 4.67329 11.0733C4.85996 11.2733 4.84663 11.5933 4.64663 11.7799Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                </svg>
              </div>
            </div><span class="d-block mb-1 fs-7 fw-bold">Simple Accounting</span>
            <p class="fs-9 text-white text-opacity-50">Keep track of your financial transactions with ease and simplicity.</p>
          </div>
        </div>
        <div class="col-sm-6 col-lg-3 mb-8">
          <div class="h-100 ps-6 pe-12 py-6 bg-primary bg-opacity-10 rounded-2">
            <div class="d-flex mb-4 align-items-center justify-content-center border border-primary rounded-pill" style="width: 40px; height: 40px;">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3368

Bootstrap

Vista

<section class="position-relative py-12 py-lg-24 bg-primary-dark">
  <div class="container">
    <div class="mw-md mx-auto mw-lg-none">
      <h2 class="font-heading mb-16">How it works</h2>
      <div class="row">
        <div class="col-lg-4 mb-10 mb-lg-0">
          <div class="d-flex mb-4 align-items-center">
            <div class="d-flex flex-shrink-0 me-8 align-items-center justify-content-center border border-primary rounded-pill" style="width: 58px; height: 58px;">
              <div class="d-flex align-items-center justify-content-center bg-primary-light bg-opacity-10 border border-white border-opacity-10 rounded-pill" style="width: 44px; height: 44px;">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M16 2H8C5.24 2 3 4.24 3 7V17C3 19.76 5.24 22 8 22H16C18.76 22 21 19.76 21 17V7C21 4.24 18.76 2 16 2ZM8.86 18.63C8.67 18.82 8.42 18.92 8.16 18.92C7.89 18.92 7.64 18.82 7.45 18.63C7.26 18.44 7.15 18.19 7.15 17.92C7.15 17.66 7.26 17.4 7.45 17.21C7.54 17.12 7.65 17.05 7.77 17C8.02 16.9 8.29 16.9 8.54 17C8.6 17.02 8.66 17.05 8.71 17.09C8.77 17.12 8.82 17.17 8.86 17.21C9.05 17.4 9.16 17.66 9.16 17.92C9.16 18.19 9.05 18.44 8.86 18.63ZM7.15 13.92C7.15 13.79 7.18 13.66 7.23 13.54C7.28 13.41 7.35 13.31 7.45 13.21C7.68 12.98 8.03 12.87 8.35 12.94C8.41 12.95 8.48 12.97 8.54 13C8.6 13.02 8.66 13.05 8.71 13.09C8.77 13.12 8.82 13.17 8.86 13.21C8.95 13.31 9.03 13.41 9.08 13.54C9.13 13.66 9.15 13.79 9.15 13.92C9.15 14.19 9.05 14.44 8.86 14.63C8.67 14.82 8.42 14.92 8.16 14.92C8.02 14.92 7.89 14.89 7.77 14.84C7.65 14.79 7.54 14.72 7.45 14.63C7.26 14.44 7.15 14.19 7.15 13.92ZM12.86 18.63C12.77 18.72 12.66 18.79 12.54 18.84C12.42 18.89 12.29 18.92 12.15 18.92C11.89 18.92 11.64 18.82 11.45 18.63C11.26 18.44 11.15 18.19 11.15 17.92C11.15 17.85 11.16 17.79 11.17 17.72C11.19 17.66 11.21 17.6 11.23 17.54C11.26 17.48 11.29 17.42 11.32 17.36C11.36 17.31 11.4 17.26 11.45 17.21C11.54 17.12 11.65 17.05 11.77 17C12.14 16.85 12.58 16.93 12.86 17.21C13.05 17.4 13.15 17.66 13.15 17.92C13.15 18.19 13.05 18.44 12.86 18.63ZM12.86 14.63C12.67 14.82 12.42 14.92 12.15 14.92C11.89 14.92 11.64 14.82 11.45 14.63C11.26 14.44 11.15 14.19 11.15 13.92C11.15 13.66 11.26 13.4 11.45 13.21C11.82 12.84 12.49 12.84 12.86 13.21C12.95 13.31 13.03 13.41 13.08 13.54C13.13 13.66 13.15 13.79 13.15 13.92C13.15 14.19 13.05 14.44 12.86 14.63ZM9 10.46C7.97 10.46 7.12 9.62 7.12 8.58V7.58C7.12 6.55 7.96 5.7 9 5.7H15C16.03 5.7 16.88 6.54 16.88 7.58V8.58C16.88 9.61 16.04 10.46 15 10.46H9ZM16.86 18.63C16.67 18.82 16.42 18.92 16.15 18.92C16.02 18.92 15.89 18.89 15.77 18.84C15.65 18.79 15.54 18.72 15.45 18.63C15.26 18.44 15.16 18.19 15.16 17.92C15.16 17.66 15.26 17.4 15.45 17.21C15.72 16.93 16.17 16.85 16.54 17C16.66 17.05 16.77 17.12 16.86 17.21C17.05 17.4 17.15 17.66 17.15 17.92C17.15 18.19 17.05 18.44 16.86 18.63ZM17.08 14.3C17.03 14.42 16.96 14.53 16.86 14.63C16.67 14.82 16.42 14.92 16.15 14.92C15.89 14.92 15.64 14.82 15.45 14.63C15.26 14.44 15.15 14.19 15.15 13.92C15.15 13.66 15.26 13.4 15.45 13.21C15.82 12.84 16.49 12.84 16.86 13.21C17.05 13.4 17.16 13.66 17.16 13.92C17.16 14.05 17.13 14.18 17.08 14.3Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                </svg>
              </div>
            </div>
            <div class="w-100 border-white border-opacity-10" style="border-bottom: 2px dashed"></div>
          </div>
          <div class="mw-sm">
            <h6 class="fs-6 fw-semibold">Input Transactions</h6>
            <p class="text-white text-opacity-50">Record your financial transactions such as receipts, and other relevant documents.</p>
          </div>
        </div>
        <div class="col-lg-4 mb-10 mb-lg-0">
          <div class="d-flex mb-4 align-items-center">
            <div class="d-flex flex-shrink-0 me-8 align-items-center justify-content-center border border-primary rounded-pill" style="width: 58px; height: 58px;">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3369

Bootstrap

Vista

<section class="position-relative py-24 bg-primary-dark">
  <div class="container">
    <div class="mw-xl mx-auto mw-lg-none">
      <div>
        <div class="row align-items-center">
          <div class="col-lg-6 mb-8 mb-lg-0">
            <div class="mw-md">
              <div class="d-flex mb-10 align-items-center"><span class="badge me-6 px-2 lh-sm rounded-2 text-white bg-white bg-opacity-10 border border-white border-opacity-10">Accounting</span><span class="fs-9 fw-medium">17 Jul 2024</span></div>
              <h3 class="font-heading">Mastering Cash Basis Accounting: A Step-by-Step Guide</h3>
            </div>
          </div>
          <div class="col-lg-6"><img class="img-fluid d-block w-100" src="vista-assets/images/blog-content/placeholder-blue.png" alt=""></div>
        </div>
      </div>
      <div class="my-12 border-bottom border-white border-opacity-10"></div>
      <div class="row">
        <div class="col-lg-4 mb-8 mb-lg-0">
          <div class="mw-sm pt-8 px-8 pb-12 bg-primary-light bg-opacity-10 rounded"><a class="btn mb-3 btn-link p-0 text-start text-white text-opacity-50" href="#">Table of content</a><a class="btn mb-3 btn-link p-0 text-start text-white fw-semibold" href="#">What is cash basis accounting?</a><a class="btn mb-3 btn-link p-0 text-start text-white text-opacity-50" href="#">How does cash accounting work?</a><a class="btn mb-12 btn-link p-0 text-start text-white text-opacity-50" href="#">The bottom line on cash basis accounting</a><span class="d-block mb-4 text-white text-opacity-50">Written by</span>
            <div class="d-flex mb-12 align-items-center"><img class="img-fluid" src="vista-assets/images/blog-content/avatar.png" alt="">
              <div class="ms-4"><span class="d-block text-white fw-semibold">Madelyn</span><span class="d-block fs-9 text-white text-opacity-50">Content Marketing</span></div>
            </div><span class="d-block mb-4 text-white text-opacity-50">Written by</span>
            <div class="d-flex align-items-center gap-6"><a class="btn btn-link p-0 text-white fs-6" href="#">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M18.205 2.25H21.513L14.286 10.51L22.788 21.75H16.13L10.916 14.933L4.94997 21.75H1.63997L9.36997 12.915L1.21497 2.25H8.03997L12.753 8.481L18.205 2.25ZM17.044 19.77H18.877L7.04497 4.126H5.07797L17.044 19.77Z" fill="currentColor"></path>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3370

Bootstrap

Vista

<section class="position-relative py-12 py-lg-24 pb-xl-32 bg-primary-dark">
  <div class="container">
    <div class="mw-xs mw-md-lg mx-auto mw-md-5xl">
      <div class="row mb-20 align-items-end">
        <div class="col-md-7 mb-10 mb-md-0">
          <div><span class="badge mb-3 text-primary-light text-uppercase" style="letter-spacing: 1.44px;">diverse and world-class</span>
            <h3 class="font-heading mb-0">Meet our team</h3>
          </div>
        </div>
        <div class="col-md-5">
          <div class="d-flex align-items-center justify-content-end">
            <div class="d-flex me-8 align-items-center">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.27232 5.86195L9.50687 6.42602L10.1158 6.47481L13.4188 6.73946L10.9024 8.89524L10.4387 9.29254L10.5803 9.88656L11.3486 13.1096L8.52091 11.3826L7.99968 11.0642L7.47844 11.3826L4.65075 13.1096L5.41909 9.88656L5.56069 9.29254L5.09694 8.89524L2.58054 6.73946L5.88355 6.47481L6.49248 6.42602L6.72703 5.86195L7.99968 2.80137L9.27232 5.86195ZM4.581 13.4022L4.58109 13.4019L4.581 13.4022ZM2.28065 6.76349L2.28088 6.76347L2.28065 6.76349Z" fill="#6691FF" stroke="#6691FF" style="fill:#6691FF;fill:color(display-p3 0.4000 0.5680 1.0000);fill-opacity:1;stroke:#6691FF;stroke:color(display-p3 0.4000 0.5680 1.0000);stroke-opacity:1;" stroke-width="2"></path>
              </svg><span class="ms-2 text-primary fw-semibold">We are hiring!</span>
            </div><a class="btn py-0 d-inline-flex align-items-center text-primary-dark btn-light border-2 border-secondary border-opacity-25" href="#"><span class="me-2 lh-lg">Careers</span>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M9.43032 8.28862L9.4303 8.2886L9.42602 8.29289L6.45312 11.2658V8.20666V4.72754L8.11268 6.3871L9.42602 7.70044C9.59121 7.86563 9.58501 8.13579 9.43032 8.28862Z" fill="black" stroke="#2E0F17" style="fill:black;fill-opacity:1;stroke:#2E0F17;stroke:color(display-p3 0.1794 0.0598 0.0891);stroke-opacity:1;" stroke-width="2"></path>
              </svg></a>
          </div>
        </div>
      </div>
      <div class="mw-xs mx-auto mw-lg-none">
        <div class="row">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3371

Bootstrap

Vista

<section class="position-relative bg-primary-dark">
  <div class="position-absolute top-0 end-0 col-6 h-100 p-8 d-none d-lg-block"><img class="img-fluid d-block h-100 w-100 mw-4xl" src="vista-assets/images/sign-up/picture-blue1.png" alt=""></div>
  <div class="position-relative container">
    <div class="row">
      <div class="col-lg-6 pt-8 pb-24 pb-lg-52">
        <div class="mw-md mx-auto">
          <div class="mb-8"><img class="img-fluid d-block mb-40" src="vista-assets/images/logos/vista-logo.svg" alt="">
            <h2 class="font-heading h4 mb-4">Login</h2>
            <p class="d-flex align-items-center mb-0"><span class="me-1 text-white text-opacity-50">Don’t have an account?</span><a class="btn btn-link p-0 text-white fw-medium" href="#">Sign up</a></p>
          </div>
          <form action="">
            <div class="mb-6">
              <label class="form-label fs-9" for="">Email</label>
              <input class="form-control bg-white bg-opacity-10 border-white border-opacity-25" type="email" id="" aria-describedby="" placeholder="john@email.com">
            </div>
            <div class="mb-8">
              <label class="form-label fs-9" for="">Password</label>
              <div class="position-relative">
                <input class="form-control bg-white bg-opacity-10 border-white border-opacity-25" type="password" id="" aria-describedby="" placeholder="Enter password">
                <button class="position-absolute top-50 end-0 me-6 translate-middle-y btn p-0 border-0 text-secondary">
                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13.7445 6.36839L13.7446 6.36857C14.0157 6.79424 14.1663 7.3838 14.1663 7.99912C14.1663 8.61458 14.0157 9.20179 13.7454 9.62345L13.7447 9.62455C13.0069 10.7821 12.1122 11.6786 11.1304 12.2878C10.1493 12.8899 9.08596 13.2066 7.99967 13.2066C5.83421 13.2066 3.72502 11.9415 2.25517 9.62537L2.25473 9.62468C1.98347 9.1988 1.83301 8.61081 1.83301 7.99662C1.83301 7.3825 1.98344 6.79456 2.25465 6.36869C2.99243 5.21114 3.88718 4.31462 4.86891 3.70547C5.85008 3.10332 6.91339 2.78662 7.99967 2.78662C10.1646 2.78662 12.2742 4.05784 13.7445 6.36839ZM4.80634 7.99995C4.80634 9.76196 6.22939 11.1933 7.99967 11.1933C9.76996 11.1933 11.193 9.76196 11.193 7.99995C11.193 6.23795 9.76996 4.80662 7.99967 4.80662C6.22939 4.80662 4.80634 6.23795 4.80634 7.99995Z" fill="currentColor" stroke="currentColor"></path>
                    <path d="M7.99961 6.09326C6.95294 6.09326 6.09961 6.94659 6.09961 7.99993C6.09961 9.04659 6.95294 9.89993 7.99961 9.89993C9.04628 9.89993 9.90628 9.04659 9.90628 7.99993C9.90628 6.95326 9.04628 6.09326 7.99961 6.09326Z" fill="currentColor"></path>
                  </svg>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3372

Bootstrap

Vista

<section class="py-12 py-lg-24 bg-primary-dark">
  <div class="container">
    <div class="mw-xl mx-auto mw-lg-none">
      <h1 class="font-heading mb-6">FAQ</h1>
      <p class="d-inline-flex flex-wrap mb-16"><span class="d-inline-block me-1 text-white text-opacity-50">Still have more questions?</span><a class="btn p-0 btn-outline-primary d-inline-flex align-items-center border-0 bg-transparent" href="#"><span class="me-1">Talk to us</span>
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M6.875 3.75L13.125 10L6.875 16.25" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></p>
      <div class="row">
        <div class="col-lg-6 mb-6 mb-lg-0">
          <div class="position-relative">
            <button class="btn d-block w-100 px-0 pt-6 pb-0 mb-6 text-start fw-normal border-0 border-top border-white border-opacity-10 rounded-0">
              <div class="d-flex justify-content-between align-items-start">
                <h6 class="fs-7 mb-0">What is Vista?</h6><span class="ms-5">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M19.5 8.25L12 15.75L4.5 8.25" stroke="white" style="stroke:white;stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg></span>
              </div>
            </button>
            <button class="btn d-block w-100 px-0 pt-6 pb-0 mb-6 text-start fw-normal border-0 border-top border-white border-opacity-10 rounded-0">
              <div class="d-flex justify-content-between align-items-start">
                <h6 class="fs-7 mb-0">Do you facilitate any regular events or offer rooms for?</h6><span class="ms-5">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M19.5 8.25L12 15.75L4.5 8.25" stroke="white" style="stroke:white;stroke-opacity:1;" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3373

Bootstrap

Vista

<section class="pb-12 pb-lg-24 bg-primary-dark">
  <nav class="navbar mb-12 mb-lg-24 navbar-expand-lg navbar-dark bg-transparent border-bottom border-white border-opacity-10">
    <div class="container"><a class="navbar-brand me-6" href="#"><img class="img-fluid" src="vista-assets/images/logos/vista-logo.svg" alt=""></a>
      <button class="d-lg-none navbar-burger p-1 border-0 bg-white bg-opacity-10 rounded-pill ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.19995 23.2H26.7999" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M5.19995 16H26.7999" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M5.19995 8.79999H26.7999" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
      <div class="collapse navbar-collapse position-absolute top-50 start-50 translate-middle" id="nav01">
        <ul class="navbar-nav bg-white p-1 bg-opacity-10 rounded-pill">
          <li class="nav-item me-2"><a class="nav-link rounded-pill" href="#">Home</a></li>
          <li class="nav-item me-2"><a class="nav-link rounded-pill" href="#">Features</a></li>
          <li class="nav-item me-2"><a class="nav-link rounded-pill" href="#">Pricing</a></li>
          <li class="nav-item me-2"><a class="nav-link rounded-pill" href="#">About</a></li>
          <li class="nav-item"><a class="nav-link bg-white bg-opacity-10 rounded-pill" href="#">Contact</a></li>
        </ul>
      </div>
      <div class="d-none d-lg-block ms-auto"><a class="btn btn-sm pe-3 d-flex align-items-center btn-outline-light border-0" href="#"><span class="me-1">Sign in</span>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5.5 3L10.5 8L5.5 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></div>
    </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3374

Bootstrap

Vista

<section class="position-relative py-12 py-md-24 bg-primary-dark">
  <div class="container">
    <div class="mw-md mw-lg-4xl mw-xl-5xl mx-auto">
      <div class="text-center">
        <h3 class="font-heading mb-4">Stay in the loop</h3>
        <p class="mw-xs mx-auto mw-md-none mb-16">Join our newsletter to get top news before anyone else</p>
        <div class="position-relative mw-sm mx-auto mb-5" style="height: 48px;">
          <div class="bg-primary bg-opacity-50" style="height: 48px; filter: blur(25px);"></div>
          <div class="position-absolute w-100 top-0 start-0" style="height: 48px;">
            <input class="form-control bg-primary-dark bg-opacity-75 h-100" type="" placeholder="Email address">
            <div class="position-absolute top-0 end-0 h-100 p-1 d-flex align-items-center">
              <button class="btn h-100 d-flex align-items-center py-2 px-4 text-primary-dark btn-light border border-white border-opacity-10" type="submit">Subscribe</button>
            </div>
          </div>
        </div>
        <p class="fs-9 mb-0">No spam. You can unsubscribe anytime.</p>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3375

Bootstrap

Vista

<section>
  <nav class="navbar navbar-expand-lg navbar-dark bg-success-dark">
    <div class="container">
      <div class="d-flex align-items-center"><a class="navbar-brand" href="#"><img class="img-fluid" style="height: 24px;" src="vista-assets/images/logos/vista-logo-small.svg" alt=""></a><span class="ms-4 me-8">
          <svg width="1" height="24" viewBox="0 0 1 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <line x1="0.5" y1="24" x2="0.5" stroke="white" style="stroke:white;stroke-opacity:1;"></line>
          </svg></span><a class="btn p-0" href="#">Careers</a></div>
      <button class="d-lg-none navbar-burger p-1 border-0 bg-white bg-opacity-10 rounded-pill ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#nav01" aria-controls="nav01" aria-expanded="false">
        <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M5.19995 23.2H26.7999" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M5.19995 16H26.7999" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M5.19995 8.79999H26.7999" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </button>
      <div class="d-none d-lg-block ms-auto"><a class="btn btn-sm pe-3 d-flex align-items-center btn-outline-light border-0" href="#"><span class="me-1">View openings</span>
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M5.5 3L10.5 8L5.5 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></div>
    </div>
  </nav>
  <div class="d-none navbar-menu position-fixed top-0 start-0 bottom-0 w-100 mw-sm" style="z-index: 9999;">
    <div class="navbar-close navbar-backdrop position-fixed top-0 start-0 end-0 bottom-0 bg-dark" style="opacity: 75%;"></div>
    <nav class="position-relative h-100 w-100 d-flex flex-column pt-6 pb-10 px-8 bg-white overflow-auto">
      <div class="d-flex align-items-center"><a class="me-auto h4 mb-0 text-decoration-none" href="#"><img class="img-fluid" src="vista-assets/images/logos/vista-logo-dark.svg" alt=""></a><a class="navbar-close" href="#">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3376

Bootstrap

Vista

<section class="position-relative py-12 py-lg-24 bg-primary-dark">
  <div class="container">
    <div class="mw-5xl mx-auto text-center mb-20"><span class="badge mb-4 text-primary-light" style="letter-spacing: 1.44px;">WHAT THEY SAY ABOUT US</span>
      <h3 class="font-heading mb-0">Testimonials</h3>
    </div>
    <div class="mw-4xl mx-auto px-12">
      <div class="position-relative mb-20">
        <div class="position-absolute top-0 start-0 w-100 h-100 mt-6 ms-4 bg-white bg-opacity-10 rounded-4"></div>
        <div class="position-relative ps-10 py-10 pe-20 bg-primary rounded-4">
          <div class="position-absolute top-100 end-0 mt-n3 me-10 text-primary">
            <svg width="44" height="33" viewBox="0 0 44 33" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M26.7544 29.8238C24.3526 32.9439 19.6474 32.9439 17.2456 29.8238L1.72343 9.65996C-1.31375 5.71454 1.49884 -4.5898e-06 6.47787 -4.15452e-06L37.5221 -1.44054e-06C42.5012 -1.00526e-06 45.3138 5.71455 42.2766 9.65996L26.7544 29.8238Z" fill="currentColor"></path>
            </svg>
          </div>
          <div>
            <h4 class="text-white fw-medium">We use Vista daily and we’re very happy that they are created this amazing bookkeeping software.</h4>
          </div>
        </div>
      </div>
      <div class="d-flex align-items-center justify-content-center">
        <button class="btn p-0 me-2 text-light">
          <svg width="32" height="6" viewBox="0 0 32 6" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="32" height="6" rx="3" fill="currentColor"></rect>
          </svg>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3377

Bootstrap

Vista

<section class="position-relative py-12 py-lg-24 bg-primary-dark">
  <div class="container">
    <div class="mw-5xl mx-auto">
      <p class="mb-12 text-center">Powering financial insights for business owners.</p>
      <div class="row justify-content-center mb-n10">
        <div class="col-sm-6 col-md-4 col-lg-3 mb-10"><img class="img-fluid d-block mx-auto" style="height: 32px;" src="vista-assets/images/logos/aurevo-logo.svg" alt=""></div>
        <div class="col-sm-6 col-md-4 col-lg-3 mb-10"><img class="img-fluid d-block mx-auto" style="height: 32px;" src="vista-assets/images/logos/syra-logo-light.svg" alt=""></div>
        <div class="col-sm-6 col-md-4 col-lg-3 mb-10"><img class="img-fluid d-block mx-auto" style="height: 32px;" src="vista-assets/images/logos/axiomatic-logo.svg" alt=""></div>
        <div class="col-sm-6 col-md-4 col-lg-3 mb-10"><img class="img-fluid d-block mx-auto" style="height: 32px;" src="vista-assets/images/logos/lume-logo.svg" alt=""></div>
        <div class="col-sm-6 col-md-4 col-lg-3 mb-10"><img class="img-fluid d-block mx-auto" style="height: 32px;" src="vista-assets/images/logos/acme-logo.svg" alt=""></div>
        <div class="col-sm-6 col-md-4 col-lg-3 mb-10"><img class="img-fluid d-block mx-auto" style="height: 32px;" src="vista-assets/images/logos/lume-logo.svg" alt=""></div>
        <div class="col-sm-6 col-md-4 col-lg-3 mb-10"><img class="img-fluid d-block mx-auto" style="height: 32px;" src="vista-assets/images/logos/cronix-logo.svg" alt=""></div>
        <div class="col-sm-6 col-md-4 col-lg-3 mb-10"><img class="img-fluid d-block mx-auto" style="height: 32px;" src="vista-assets/images/logos/syra-logo-light.svg" alt=""></div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3378

Bootstrap

Vista

<section class="position-relative pt-12 pt-lg-24 bg-gradient-primary-top">
  <div class="container position-relative">
    <div class="row mb-20 mb-lg-32">
      <div class="col-lg-6 mb-8 mb-lg-0">
        <div class="d-flex flex-wrap align-items-center gap-4"><a class="btn btn-link p-0 text-white" href="#">Features</a><a class="btn btn-link p-0 text-white" href="#">How it works</a><a class="btn btn-link p-0 text-white" href="#">Pricing</a><a class="btn btn-link p-0 text-white" href="#">About</a><a class="btn btn-link p-0 text-white" href="#">Blog</a><a class="btn btn-link p-0 text-white" href="#">FAQs</a><a class="btn btn-link p-0 text-white" href="#">Contact</a></div>
      </div>
      <div class="col-lg-6">
        <div class="d-flex align-items-center justify-content-lg-end gap-6"><a class="btn btn-link p-0 text-white" href="#">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18.205 2.25H21.513L14.286 10.51L22.788 21.75H16.13L10.916 14.933L4.94997 21.75H1.63997L9.36997 12.915L1.21497 2.25H8.03997L12.753 8.481L18.205 2.25ZM17.044 19.77H18.877L7.04497 4.126H5.07797L17.044 19.77Z" fill="currentColor"></path>
            </svg></a><a class="btn btn-link p-0 text-white" href="#">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.7778 2C20.3671 2 20.9324 2.23413 21.3491 2.65087C21.7659 3.06762 22 3.63285 22 4.22222V19.7778C22 20.3671 21.7659 20.9324 21.3491 21.3491C20.9324 21.7659 20.3671 22 19.7778 22H4.22222C3.63285 22 3.06762 21.7659 2.65087 21.3491C2.23413 20.9324 2 20.3671 2 19.7778V4.22222C2 3.63285 2.23413 3.06762 2.65087 2.65087C3.06762 2.23413 3.63285 2 4.22222 2H19.7778ZM19.2222 19.2222V13.3333C19.2222 12.3727 18.8406 11.4513 18.1613 10.772C17.482 10.0927 16.5607 9.71111 15.6 9.71111C14.6556 9.71111 13.5556 10.2889 13.0222 11.1556V9.92222H9.92222V19.2222H13.0222V13.7444C13.0222 12.8889 13.7111 12.1889 14.5667 12.1889C14.9792 12.1889 15.3749 12.3528 15.6666 12.6445C15.9583 12.9362 16.1222 13.3319 16.1222 13.7444V19.2222H19.2222ZM6.31111 8.17778C6.80618 8.17778 7.28098 7.98111 7.63104 7.63104C7.98111 7.28098 8.17778 6.80618 8.17778 6.31111C8.17778 5.27778 7.34444 4.43333 6.31111 4.43333C5.81309 4.43333 5.33547 4.63117 4.98332 4.98332C4.63117 5.33547 4.43333 5.81309 4.43333 6.31111C4.43333 7.34444 5.27778 8.17778 6.31111 8.17778ZM7.85556 19.2222V9.92222H4.77778V19.2222H7.85556Z" fill="currentColor"></path>
            </svg></a><a class="btn btn-link p-0 text-white" href="#">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7.8 2H16.2C19.4 2 22 4.6 22 7.8V16.2C22 17.7383 21.3889 19.2135 20.3012 20.3012C19.2135 21.3889 17.7383 22 16.2 22H7.8C4.6 22 2 19.4 2 16.2V7.8C2 6.26174 2.61107 4.78649 3.69878 3.69878C4.78649 2.61107 6.26174 2 7.8 2ZM7.6 4C6.64522 4 5.72955 4.37928 5.05442 5.05442C4.37928 5.72955 4 6.64522 4 7.6V16.4C4 18.39 5.61 20 7.6 20H16.4C17.3548 20 18.2705 19.6207 18.9456 18.9456C19.6207 18.2705 20 17.3548 20 16.4V7.6C20 5.61 18.39 4 16.4 4H7.6ZM17.25 5.5C17.5815 5.5 17.8995 5.6317 18.1339 5.86612C18.3683 6.10054 18.5 6.41848 18.5 6.75C18.5 7.08152 18.3683 7.39946 18.1339 7.63388C17.8995 7.8683 17.5815 8 17.25 8C16.9185 8 16.6005 7.8683 16.3661 7.63388C16.1317 7.39946 16 7.08152 16 6.75C16 6.41848 16.1317 6.10054 16.3661 5.86612C16.6005 5.6317 16.9185 5.5 17.25 5.5ZM12 7C13.3261 7 14.5979 7.52678 15.5355 8.46447C16.4732 9.40215 17 10.6739 17 12C17 13.3261 16.4732 14.5979 15.5355 15.5355C14.5979 16.4732 13.3261 17 12 17C10.6739 17 9.40215 16.4732 8.46447 15.5355C7.52678 14.5979 7 13.3261 7 12C7 10.6739 7.52678 9.40215 8.46447 8.46447C9.40215 7.52678 10.6739 7 12 7ZM12 9C11.2044 9 10.4413 9.31607 9.87868 9.87868C9.31607 10.4413 9 11.2044 9 12C9 12.7956 9.31607 13.5587 9.87868 14.1213C10.4413 14.6839 11.2044 15 12 15C12.7956 15 13.5587 14.6839 14.1213 14.1213C14.6839 13.5587 15 12.7956 15 12C15 11.2044 14.6839 10.4413 14.1213 9.87868C13.5587 9.31607 12.7956 9 12 9Z" fill="currentColor"></path>
            </svg></a><a class="btn btn-link p-0 text-white" href="#">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M22 12.0251C22 6.49123 17.52 2 12 2C6.48 2 2 6.49123 2 12.0251C2 16.8772 5.44 20.9173 10 21.8496V15.0326H8V12.0251H10V9.5188C10 7.58396 11.57 6.01003 13.5 6.01003H16V9.01754H14C13.45 9.01754 13 9.46867 13 10.0201V12.0251H16V15.0326H13V22C18.05 21.4987 22 17.2281 22 12.0251Z" fill="currentColor"></path>
            </svg></a></div>
      </div>
    </div><img class="img-fluid d-block mx-auto" src="vista-assets/images/footer/bg-text-pink.png" alt="">
  </div><img class="position-absolute bottom-0 start-0 w-100" src="vista-assets/images/footer/background-blue.png" alt="">
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3379

Bootstrap

Vista

<section class="position-relative py-12 py-lg-24 bg-primary-dark overflow-hidden">
  <div class="container">
    <div class="mw-4xl mx-auto mb-16 mb-sm-32 text-center">
      <h1 class="font-heading mb-12 mb-sm-24">Our mission is to make bookkeeping simple</h1>
      <div class="position-relative mx-auto mw-sm">
        <div class="position-absolute start-0 top-0 mt-n10 bg-gradient-primary-top opacity-50 rounded-pill h-100 w-100" style="filter: blur(90px);"></div><img class="position-relative img-fluid" style="height:400px" src="vista-assets/images/logos/vista-logo-blue.svg" alt="">
      </div>
    </div>
    <div class="mw-xs mw-sm-xl mx-auto mb-8 mw-lg-none">
      <div class="row align-items-center">
        <div class="col-12 col-lg-5 mb-12 pb-12 pb-lg-0 mb-lg-0 position-relative">
          <div class="d-none d-lg-block position-absolute top-0 end-0 h-100 border-end border-white border-opacity-10"></div>
          <div class="d-lg-none position-absolute bottom-0 start-0 w-100 border-bottom border-white border-opacity-10"></div>
          <div class="mw-xs"><span class="d-block mb-1 text-white text-opacity-50">Investors</span>
            <h6 class="text-white mb-0">Funded by industry-leading investors</h6>
          </div>
        </div>
        <div class="col-sm-6 col-lg-4 mb-8 pb-8 mb-sm-0 pb-sm-0 position-relative">
          <div class="d-none d-sm-block position-absolute top-0 end-0 h-100 border-end border-white border-opacity-10"></div>
          <div class="d-sm-none position-absolute bottom-0 start-0 w-100 border-bottom border-white border-opacity-10"></div>
          <div class="d-flex justify-content-center">
            <div class="text-center"><span class="d-block mb-1 text-white text-opacity-50">Team members</span><span class="d-block fs-3 text-white fw-bold">110</span></div>
          </div>
        </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Bootstrap Component #3380

Bootstrap

Vista

<section class="position-relative py-12 py-md-24 py-lg-32 bg-primary-dark">
  <div class="container">
    <div class="mw-sm mw-lg-4xl mw-xl-5xl mx-auto">
      <div class="row">
        <div class="col-lg-6 mb-12 mb-lg-0">
          <div class="position-relative mw-lg-sm ps-10">
            <div class="position-absolute top-0 start-0 px-1 h-100 bg-primary"></div><span class="d-block mb-5 fs-6">Customer’s revenue saved</span>
            <h2 class="lh-sm fw-semibold mb-0">$55,199,213.68</h2>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="position-relative mw-lg-sm ms-lg-auto ps-10">
            <div class="position-absolute top-0 start-0 px-1 h-100 bg-white bg-opacity-25"></div><span class="d-block mb-5 fs-6">Time saved managing finances</span>
            <h2 class="lh-sm fw-semibold mb-0">3,195 hours</h2>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Framework

UI Library

Components

Bootstrap Component #3361

Get the code for 13,400+ components

Bootstrap Component #3362

Get the code for 13,400+ components

Bootstrap Component #3363

Get the code for 13,400+ components

Bootstrap Component #3364

Get the code for 13,400+ components

Bootstrap Component #3365

Get the code for 13,400+ components

Bootstrap Component #3366

Get the code for 13,400+ components

Bootstrap Component #3367

Get the code for 13,400+ components

Bootstrap Component #3368

Get the code for 13,400+ components

Bootstrap Component #3369

Get the code for 13,400+ components

Bootstrap Component #3370

Get the code for 13,400+ components

Bootstrap Component #3371

Get the code for 13,400+ components

Bootstrap Component #3372

Get the code for 13,400+ components

Bootstrap Component #3373

Get the code for 13,400+ components

Bootstrap Component #3374

Get the code for 13,400+ components

Bootstrap Component #3375

Get the code for 13,400+ components

Bootstrap Component #3376

Get the code for 13,400+ components

Bootstrap Component #3377

Get the code for 13,400+ components

Bootstrap Component #3378

Get the code for 13,400+ components

Bootstrap Component #3379

Get the code for 13,400+ components

Bootstrap Component #3380

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

monthly

annual

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support