Offcanvas

<button class="btn btn-primary" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1074" aria-controls="oc-1074">Open panel</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="oc-1074" aria-labelledby="oc-1074-label">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1074-label">Hello there</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>No monthly fees on the basic plan and no hidden charges on transfers.</p>
    <p class="mb-0">Payroll runs on time, with tax and pension payments handled for you.</p>
  </div>
</div>

<a class="link-primary" data-ui-toggle="offcanvas" href="#oc-1075" role="button" aria-controls="oc-1075"><i class="bi bi-info-circle" aria-hidden="true"></i> What is Quillium?</a>
<div class="offcanvas offcanvas-start" tabindex="-1" id="oc-1075" aria-labelledby="oc-1075-label">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1075-label">About Quillium</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Every payment appears instantly, with receipts matched automatically. Cash flow forecasts show where you will be next month, not just today. We measure success by how many members come back and tell their friends.</p>
    <a href="#" class="btn btn-outline-primary btn-sm">Learn more</a>
  </div>
</div>

<button class="btn btn-outline-primary" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1076" aria-controls="oc-1076">From the right <i class="bi bi-arrow-left" aria-hidden="true"></i></button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="oc-1076" aria-labelledby="oc-1076-label">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1076-label">Details</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">We listen first, then build a plan around what you actually need.</p>
  </div>
</div>

<button class="btn btn-outline-secondary" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1077" aria-controls="oc-1077"><i class="bi bi-arrow-down" aria-hidden="true"></i> From the top</button>
<div class="offcanvas offcanvas-top" tabindex="-1" id="oc-1077" aria-labelledby="oc-1077-label">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1077-label">Search everything</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <form class="container" role="search" style="max-width:640px">
      <label class="visually-hidden" for="oc-search-1078">Search</label>
      <div class="input-group input-group-lg">
        <span class="input-group-text"><i class="bi bi-search" aria-hidden="true"></i></span><input class="form-control" type="search" id="oc-search-1078" placeholder="Search Quillium">
      </div>
    </form>
  </div>
</div>

<button class="btn btn-outline-secondary" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1079" aria-controls="oc-1079"><i class="bi bi-arrow-up" aria-hidden="true"></i> From the bottom</button>
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="oc-1079" aria-labelledby="oc-1079-label">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1079-label">Bottom sheet</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">Thousands of members already trust us, and we work hard to keep it that way.</p>
  </div>
</div>

<button class="btn btn-secondary" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1080" aria-controls="oc-1080">Panel without backdrop</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="oc-1080" aria-labelledby="oc-1080-label" data-ui-scroll="true" data-ui-backdrop="false">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1080-label">Page stays usable</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">Scroll the page while this panel is open. Invoices go out with a payment link, so customers can pay you in one click.</p>
  </div>
</div>

<button class="btn btn-secondary" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1081" aria-controls="oc-1081">Scroll + backdrop</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="oc-1081" aria-labelledby="oc-1081-label" data-ui-scroll="true">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1081-label">Backdrop and scrolling</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">We listen first, then build a plan around what you actually need.</p>
  </div>
</div>

<button class="btn btn-warning" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1082" aria-controls="oc-1082"><i class="bi bi-lock" aria-hidden="true"></i> Static panel</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="oc-1082" aria-labelledby="oc-1082-label" data-ui-backdrop="static">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1082-label">Unsaved changes</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Clicking outside will not close this panel.</p>
    <button type="button" class="btn btn-primary" data-ui-dismiss="offcanvas">Save and close</button>
  </div>
</div>

<button class="btn btn-dark" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1083" aria-controls="oc-1083"><i class="bi bi-moon" aria-hidden="true"></i> Dark panel</button>
<div class="offcanvas offcanvas-start" data-ui-theme="dark" tabindex="-1" id="oc-1083" aria-labelledby="oc-1083-label">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5 text-body-emphasis" id="oc-1083-label">Night shift</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body bg-dark text-body">
    <p>Cash flow forecasts show where you will be next month, not just today.</p>
    <button type="button" class="btn btn-outline-light btn-sm">Action</button>
  </div>
</div>

<button class="btn btn-primary" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1084" aria-controls="oc-1084"><i class="bi bi-list" aria-hidden="true"></i> Menu</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="oc-1084" aria-labelledby="oc-1084-label">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1084-label">Quillium</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div class="list-group list-group-flush">
      <a href="#" class="list-group-item list-group-item-action d-flex align-items-center gap-2"><i class="bi bi-house-door" aria-hidden="true"></i>Home</a><a href="#" class="list-group-item list-group-item-action d-flex align-items-center gap-2 active" aria-current="true"><i class="bi bi-speedometer2" aria-hidden="true"></i>Dashboard</a><a href="#" class="list-group-item list-group-item-action d-flex align-items-center gap-2"><i class="bi bi-inbox" aria-hidden="true"></i>Inbox<span class="badge text-bg-danger rounded-pill ms-auto">6</span></a><a href="#" class="list-group-item list-group-item-action d-flex align-items-center gap-2"><i class="bi bi-people" aria-hidden="true"></i>Team</a><a href="#" class="list-group-item list-group-item-action d-flex align-items-center gap-2"><i class="bi bi-calendar" aria-hidden="true"></i>Calendar</a><a href="#" class="list-group-item list-group-item-action d-flex align-items-center gap-2"><i class="bi bi-gear" aria-hidden="true"></i>Settings</a>
    </div>
  </div>
</div>

<button class="btn btn-outline-primary" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1085" aria-controls="oc-1085"><i class="bi bi-list-nested" aria-hidden="true"></i> All sections</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="oc-1085" aria-labelledby="oc-1085-label">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1085-label">Sections</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <ul class="list-unstyled mb-0">
      <li class="mb-1"><button class="btn w-100 text-start d-flex justify-content-between align-items-center" type="button" data-ui-toggle="collapse" data-ui-target="#sub-1086" aria-expanded="true" aria-controls="sub-1086">Savings <i class="bi bi-chevron-down" aria-hidden="true"></i></button><div class="collapse show" id="sub-1086"><ul class="list-unstyled ps-4 small"><li><a href="#" class="d-block py-1 link-body-emphasis">Overview</a></li><li><a href="#" class="d-block py-1 link-body-emphasis">Updates</a></li><li><a href="#" class="d-block py-1 link-body-emphasis">Reports</a></li></ul></div></li>
      <li class="mb-1"><button class="btn w-100 text-start d-flex justify-content-between align-items-center collapsed" type="button" data-ui-toggle="collapse" data-ui-target="#sub-1087" aria-expanded="false" aria-controls="sub-1087">Payroll <i class="bi bi-chevron-down" aria-hidden="true"></i></button><div class="collapse" id="sub-1087"><ul class="list-unstyled ps-4 small"><li><a href="#" class="d-block py-1 link-body-emphasis">New</a></li><li><a href="#" class="d-block py-1 link-body-emphasis">Popular</a></li><li><a href="#" class="d-block py-1 link-body-emphasis">Archived</a></li></ul></div></li>
      <li><a href="#" class="btn w-100 text-start">Account</a></li>
    </ul>
  </div>
</div>

<button class="btn btn-outline-dark" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1088" aria-controls="oc-1088"><i class="bi bi-funnel" aria-hidden="true"></i> Filters</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="oc-1088" aria-labelledby="oc-1088-label">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1088-label">Filter results</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <form>
      <h3 class="h6">Category</h3>
      <div class="mb-4">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="flt-1089">
          <label class="form-check-label" for="flt-1089">Payments</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="flt-1090">
          <label class="form-check-label" for="flt-1090">Payroll</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="flt-1091">
          <label class="form-check-label" for="flt-1091">Cards</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="flt-1092">
          <label class="form-check-label" for="flt-1092">Invoices</label>
        </div>
      </div>
      <label for="flt-price-1093" class="form-label h6 d-flex justify-content-between">Max price <output id="flt-out-1094" class="fw-normal">250</output></label>
      <input type="range" class="form-range mb-4" min="0" max="500" value="250" id="flt-price-1093" data-demo-range-output="#flt-out-1094">
      <label for="flt-sort-1095" class="form-label h6">Sort by</label>
      <select class="form-select mb-4" id="flt-sort-1095">
        <option>Most popular</option>
        <option>Newest</option>
        <option>Price: low to high</option>
        <option>Price: high to low</option>
      </select>
      <div class="d-flex gap-2">
        <button type="reset" class="btn btn-outline-secondary flex-fill">Reset</button>
        <button type="button" class="btn btn-primary flex-fill" data-ui-dismiss="offcanvas">Apply</button>
      </div>
    </form>
  </div>
</div>

<button class="btn btn-primary position-relative" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1096" aria-controls="oc-1096"><i class="bi bi-cart3" aria-hidden="true"></i> Cart <span class="badge text-bg-light ms-1">3</span></button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="oc-1096" aria-labelledby="oc-1096-label">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1096-label">Your cart</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div class="d-flex flex-column h-100">
      <ul class="list-group list-group-flush flex-grow-1">
        <li class="list-group-item d-flex gap-3 align-items-center px-0"><img src="../assets/img/product-5.svg" class="rounded" width="56" height="56" alt="Savings vault"><div class="flex-grow-1"><div class="fw-semibold small">Savings vault</div><div class="small text-body-secondary">Qty 1</div></div><span class="small fw-semibold">Free</span></li>
        <li class="list-group-item d-flex gap-3 align-items-center px-0"><img src="../assets/img/product-3.svg" class="rounded" width="56" height="56" alt="Virtual card"><div class="flex-grow-1"><div class="fw-semibold small">Virtual card</div><div class="small text-body-secondary">Qty 1</div></div><span class="small fw-semibold">Free</span></li>
        <li class="list-group-item d-flex gap-3 align-items-center px-0"><img src="../assets/img/product-2.svg" class="rounded" width="56" height="56" alt="Pro account"><div class="flex-grow-1"><div class="fw-semibold small">Pro account</div><div class="small text-body-secondary">Qty 1</div></div><span class="small fw-semibold">$12.00</span></li>
      </ul>
      <div class="border-top pt-3">
        <div class="d-flex justify-content-between mb-3">
          <span>Subtotal</span><strong>$12.00</strong>
        </div>
        <a href="#" class="btn btn-primary w-100 mb-2">Checkout</a>
        <button type="button" class="btn btn-link w-100" data-ui-dismiss="offcanvas">Continue shopping</button>
      </div>
    </div>
  </div>
</div>

<button class="btn btn-light border position-relative" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1097" aria-controls="oc-1097" aria-label="Notifications"><i class="bi bi-bell" aria-hidden="true"></i><span class="position-absolute top-0 start-100 translate-middle p-1 bg-danger border border-light rounded-circle"><span class="visually-hidden">New alerts</span></span></button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="oc-1097" aria-labelledby="oc-1097-label">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1097-label">Notifications</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div class="text-end">
      <a href="#" class="small">Mark all as read</a>
    </div>
    <div class="d-flex gap-3 py-3 border-bottom">
      <span class="text-primary fs-5"><i class="bi bi-chat-dots" aria-hidden="true"></i></span>
      <div>
        <p class="small mb-1">Our team has done this many times, so you never have to guess.</p>
        <small class="text-body-secondary">yesterday</small>
      </div>
    </div>
    <div class="d-flex gap-3 py-3 border-bottom">
      <span class="text-success fs-5"><i class="bi bi-cloud-check" aria-hidden="true"></i></span>
      <div>
        <p class="small mb-1">Friendly people answer your questions quickly, by phone, chat or email.</p>
        <small class="text-body-secondary">20 min ago</small>
      </div>
    </div>
    <div class="d-flex gap-3 py-3 border-bottom">
      <span class="text-info fs-5"><i class="bi bi-person-plus" aria-hidden="true"></i></span>
      <div>
        <p class="small mb-1">Payroll runs on time, with tax and pension payments handled for you.</p>
        <small class="text-body-secondary">9 hours ago</small>
      </div>
    </div>
    <div class="d-flex gap-3 py-3 border-bottom">
      <span class="text-warning fs-5"><i class="bi bi-exclamation-triangle" aria-hidden="true"></i></span>
      <div>
        <p class="small mb-1">Your money is protected by bank-grade security and regulated partners.</p>
        <small class="text-body-secondary">20 hours ago</small>
      </div>
    </div>
  </div>
</div>

<button class="btn p-0 border-0 rounded-circle" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1098" aria-controls="oc-1098" aria-label="Open profile"><img src="../assets/img/avatar-9.svg" class="rounded-circle" width="44" height="44" alt="Zoe Moreau"></button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="oc-1098" aria-labelledby="oc-1098-label">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1098-label">Profile</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div class="text-center mb-4">
      <img src="../assets/img/avatar-9.svg" class="rounded-circle mb-2" width="88" height="88" alt="Zoe Moreau">
      <h3 class="h5 mb-0">Zoe Moreau</h3>
      <p class="small text-body-secondary">Operations Manager - Seoul</p>
    </div>
    <div class="row text-center g-2 mb-4">
      <div class="col-4">
        <div class="border rounded py-2">
          <strong class="d-block">14</strong><small class="text-body-secondary">Projects</small>
        </div>
      </div>
      <div class="col-4">
        <div class="border rounded py-2">
          <strong class="d-block">3.9k</strong><small class="text-body-secondary">Followers</small>
        </div>
      </div>
      <div class="col-4">
        <div class="border rounded py-2">
          <strong class="d-block">293</strong><small class="text-body-secondary">Reviews</small>
        </div>
      </div>
    </div>
    <div class="list-group">
      <a href="#" class="list-group-item list-group-item-action"><i class="bi bi-person" aria-hidden="true"></i> My account</a><a href="#" class="list-group-item list-group-item-action"><i class="bi bi-credit-card" aria-hidden="true"></i> Billing</a><a href="#" class="list-group-item list-group-item-action text-danger"><i class="bi bi-box-arrow-right" aria-hidden="true"></i> Sign out</a>
    </div>
  </div>
</div>

<button class="btn btn-outline-secondary" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1099" aria-controls="oc-1099"><i class="bi bi-sliders" aria-hidden="true"></i> Quick settings</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="oc-1099" aria-labelledby="oc-1099-label">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1099-label">Quick settings</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div class="d-flex flex-column h-100">
      <div class="flex-grow-1">
        <div class="form-check form-switch mb-3">
          <input class="form-check-input" type="checkbox" role="switch" id="set-1100" checked>
          <label class="form-check-label" for="set-1100">Desktop notifications</label>
        </div>
        <div class="form-check form-switch mb-3">
          <input class="form-check-input" type="checkbox" role="switch" id="set-1101">
          <label class="form-check-label" for="set-1101">Compact layout</label>
        </div>
        <div class="form-check form-switch mb-4">
          <input class="form-check-input" type="checkbox" role="switch" id="set-1102" checked>
          <label class="form-check-label" for="set-1102">Weekly summary email</label>
        </div>
        <label for="set-lang-1103" class="form-label">Time zone</label>
        <select class="form-select" id="set-lang-1103">
          <option>UTC</option>
          <option>Central European Time</option>
          <option>Pacific Time</option>
          <option>Japan Standard Time</option>
        </select>
      </div>
      <div class="d-flex gap-2 pt-3 border-top">
        <button type="button" class="btn btn-outline-secondary flex-fill" data-ui-dismiss="offcanvas">Cancel</button>
        <button type="button" class="btn btn-primary flex-fill" data-ui-dismiss="offcanvas">Save</button>
      </div>
    </div>
  </div>
</div>

<button class="btn btn-primary d-lg-none mb-2" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1104" aria-controls="oc-1104"><i class="bi bi-layout-sidebar-inset" aria-hidden="true"></i> Show sidebar</button>
<div class="offcanvas-lg offcanvas-start" tabindex="-1" id="oc-1104" aria-labelledby="oc-1104-label">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1104-label">Sidebar</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" data-ui-target="#oc-1104" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div class="p-3 border rounded bg-body-tertiary w-100">
      <p class="mb-0">Every payment appears instantly, with receipts matched automatically.</p>
    </div>
  </div>
</div>

<button class="btn btn-success" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1105" aria-controls="oc-1105"><i class="bi bi-chat-left-text" aria-hidden="true"></i> Contact us</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="oc-1105" aria-labelledby="oc-1105-label">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1105-label">How can we help?</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <form>
      <div class="mb-3">
        <label for="ct-name-1106" class="form-label">Name</label>
        <input type="text" class="form-control" id="ct-name-1106">
      </div>
      <div class="mb-3">
        <label for="ct-email-1107" class="form-label">Email</label>
        <input type="email" class="form-control" id="ct-email-1107">
      </div>
      <div class="mb-3">
        <label for="ct-msg-1108" class="form-label">Message</label>
        <textarea class="form-control" id="ct-msg-1108" rows="5" maxlength="400" data-demo-counter="#ct-count-1109"></textarea>
        <div class="form-text text-end" id="ct-count-1109">
          0 / 400
        </div>
      </div>
      <button type="submit" class="btn btn-success w-100"><i class="bi bi-send" aria-hidden="true"></i> Send message</button>
    </form>
  </div>
</div>

<button class="btn btn-outline-primary" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1110" aria-controls="oc-1110"><i class="bi bi-share" aria-hidden="true"></i> Share</button>
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="oc-1110" aria-labelledby="oc-1110-label" style="height:auto">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1110-label">Share via</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div class="row g-2 justify-content-center">
      <div class="col-4 col-sm-2">
        <a href="#" class="d-block text-center link-body-emphasis text-decoration-none py-2"><span class="d-inline-flex align-items-center justify-content-center rounded-circle bg-body-tertiary fs-4 mb-1" style="width:3rem;height:3rem"><i class="bi bi-envelope" aria-hidden="true"></i></span><small class="d-block">Email</small></a>
      </div>
      <div class="col-4 col-sm-2">
        <a href="#" class="d-block text-center link-body-emphasis text-decoration-none py-2"><span class="d-inline-flex align-items-center justify-content-center rounded-circle bg-body-tertiary fs-4 mb-1" style="width:3rem;height:3rem"><i class="bi bi-chat-dots" aria-hidden="true"></i></span><small class="d-block">Message</small></a>
      </div>
      <div class="col-4 col-sm-2">
        <a href="#" class="d-block text-center link-body-emphasis text-decoration-none py-2"><span class="d-inline-flex align-items-center justify-content-center rounded-circle bg-body-tertiary fs-4 mb-1" style="width:3rem;height:3rem"><i class="bi bi-link-45deg" aria-hidden="true"></i></span><small class="d-block">Copy link</small></a>
      </div>
      <div class="col-4 col-sm-2">
        <a href="#" class="d-block text-center link-body-emphasis text-decoration-none py-2"><span class="d-inline-flex align-items-center justify-content-center rounded-circle bg-body-tertiary fs-4 mb-1" style="width:3rem;height:3rem"><i class="bi bi-qr-code" aria-hidden="true"></i></span><small class="d-block">QR code</small></a>
      </div>
      <div class="col-4 col-sm-2">
        <a href="#" class="d-block text-center link-body-emphasis text-decoration-none py-2"><span class="d-inline-flex align-items-center justify-content-center rounded-circle bg-body-tertiary fs-4 mb-1" style="width:3rem;height:3rem"><i class="bi bi-printer" aria-hidden="true"></i></span><small class="d-block">Print</small></a>
      </div>
      <div class="col-4 col-sm-2">
        <a href="#" class="d-block text-center link-body-emphasis text-decoration-none py-2"><span class="d-inline-flex align-items-center justify-content-center rounded-circle bg-body-tertiary fs-4 mb-1" style="width:3rem;height:3rem"><i class="bi bi-download" aria-hidden="true"></i></span><small class="d-block">Save</small></a>
      </div>
    </div>
  </div>
</div>

<button class="btn btn-primary rounded-pill" type="button" data-ui-toggle="offcanvas" data-ui-target="#oc-1111" aria-controls="oc-1111"><i class="bi bi-chat-dots-fill" aria-hidden="true"></i> Chat with us</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="oc-1111" aria-labelledby="oc-1111-label">
  <div class="offcanvas-header">
    <h2 class="offcanvas-title fs-5" id="oc-1111-label">Chat with Kai</h2>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div class="d-flex flex-column h-100">
      <div class="flex-grow-1">
        <div class="d-flex gap-2 mb-3">
          <img src="../assets/img/avatar-7.svg" class="rounded-circle" width="32" height="32" alt="Kai">
          <div class="bg-body-tertiary rounded-3 p-2 small">
            Hi! I am Kai. How can I help today?
          </div>
        </div>
        <div class="d-flex justify-content-end mb-3">
          <div class="text-bg-primary rounded-3 p-2 small">
            Do you offer payroll?
          </div>
        </div>
        <div class="d-flex gap-2 mb-3">
          <img src="../assets/img/avatar-7.svg" class="rounded-circle" width="32" height="32" alt="Kai">
          <div class="bg-body-tertiary rounded-3 p-2 small">
            Thousands of members already trust us, and we work hard to keep it that way.
          </div>
        </div>
      </div>
      <form class="input-group">
        <label for="chat-msg-1112" class="visually-hidden">Message</label>
        <input type="text" class="form-control" id="chat-msg-1112" placeholder="Type a message">
        <button class="btn btn-primary" type="submit" aria-label="Send"><i class="bi bi-send-fill" aria-hidden="true"></i></button>
      </form>
    </div>
  </div>
</div>