Accordion

Our UI library is designed to enhance web development by providing a comprehensive set of pre-designed user interface components and styles based on the Bootstrap framework.

It aims to streamline the design and development process, making it easier for developers to create responsive, visually appealing, and consistent user interfaces for their web applications.

Our UI library is designed to enhance web development by providing a comprehensive set of pre-designed user interface components and styles based on the Bootstrap framework.

It aims to streamline the design and development process, making it easier for developers to create responsive, visually appealing, and consistent user interfaces for their web applications.

Our UI library is designed to enhance web development by providing a comprehensive set of pre-designed user interface components and styles based on the Bootstrap framework.

It aims to streamline the design and development process, making it easier for developers to create responsive, visually appealing, and consistent user interfaces for their web applications.

Our UI library is designed to enhance web development by providing a comprehensive set of pre-designed user interface components and styles based on the Bootstrap framework.

It aims to streamline the design and development process, making it easier for developers to create responsive, visually appealing, and consistent user interfaces for their web applications.
<div class="accordion vstack gap-3" id="accordionExample">
  <div class="card">
    <h2 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="false" aria-controls="collapse1"><span class="h6 fw-semibold">Purpose of our UI library?</span></button></h2>
    <div id="collapse1" class="collapse" aria-labelledby="heading1" data-bs-parent="#accordionExample">
      <div class="card-body">
        <div class="vstack gap-4 text-sm">Our UI library is designed to enhance web development by providing a comprehensive set of pre-designed user interface components and styles based on the Bootstrap framework.<br><br>It aims to streamline the design and development process, making it easier for developers to create responsive, visually appealing, and consistent user interfaces for their web applications.</div>
      </div>
    </div>
  </div>
  <div class="card">
    <h2 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapse2"><span class="h6 fw-semibold">Prior experience with Bootstrap required?</span></button></h2>
    <div id="collapse2" class="collapse" aria-labelledby="heading2" data-bs-parent="#accordionExample">
      <div class="card-body">
        <div class="vstack gap-4 text-sm">Our UI library is designed to enhance web development by providing a comprehensive set of pre-designed user interface components and styles based on the Bootstrap framework.<br><br>It aims to streamline the design and development process, making it easier for developers to create responsive, visually appealing, and consistent user interfaces for their web applications.</div>
      </div>
    </div>
  </div>
  <div class="card">
    <h2 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse3" aria-expanded="false" aria-controls="collapse3"><span class="h6 fw-semibold">How often do you update the UI library?</span></button></h2>
    <div id="collapse3" class="collapse" aria-labelledby="heading3" data-bs-parent="#accordionExample">
      <div class="card-body">
        <div class="vstack gap-4 text-sm">Our UI library is designed to enhance web development by providing a comprehensive set of pre-designed user interface components and styles based on the Bootstrap framework.<br><br>It aims to streamline the design and development process, making it easier for developers to create responsive, visually appealing, and consistent user interfaces for their web applications.</div>
      </div>
    </div>
  </div>
  <div class="card">
    <h2 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse4" aria-expanded="false" aria-controls="collapse4"><span class="h6 fw-semibold">How to get started with your Bootstrap library?</span></button></h2>
    <div id="collapse4" class="collapse" aria-labelledby="heading4" data-bs-parent="#accordionExample">
      <div class="card-body">
        <div class="vstack gap-4 text-sm">Our UI library is designed to enhance web development by providing a comprehensive set of pre-designed user interface components and styles based on the Bootstrap framework.<br><br>It aims to streamline the design and development process, making it easier for developers to create responsive, visually appealing, and consistent user interfaces for their web applications.</div>
      </div>
    </div>
  </div>
</div>

Alerts

<div class="alert alert-primary" role="alert">A simple primary alert—check it out!</div>
<div class="alert alert-secondary" role="alert">A simple secondary alert—check it out!</div>
<div class="alert alert-success" role="alert">A simple success alert—check it out!</div>
<div class="alert alert-danger" role="alert">A simple danger alert—check it out!</div>
<div class="alert alert-warning" role="alert">A simple warning alert—check it out!</div>
<div class="alert alert-info" role="alert">A simple info alert—check it out!</div>
<div class="alert alert-light" role="alert">A simple light alert—check it out!</div>
<div class="alert alert-dark" role="alert">A simple dark alert—check it out!</div>

Avatars

...

...
...
...
...
<div class="avatar avatar-xs rounded-circle"><img alt="..." src="https://images.unsplash.com/photo-1522307837370-cc113a36b784?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=3&amp;w=256&amp;h=256&amp;q=80"></div>
<div class="avatar avatar-sm rounded-circle"><img alt="..." src="https://images.unsplash.com/photo-1522307837370-cc113a36b784?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=3&amp;w=256&amp;h=256&amp;q=80"></div>
<div class="avatar rounded-circle"><img alt="..." src="https://images.unsplash.com/photo-1522307837370-cc113a36b784?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=3&amp;w=256&amp;h=256&amp;q=80"></div>
<div class="avatar avatar-lg rounded-circle"><img alt="..." src="https://images.unsplash.com/photo-1522307837370-cc113a36b784?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=3&amp;w=256&amp;h=256&amp;q=80"></div>
<div class="avatar avatar-xl rounded-circle"><img alt="..." src="https://images.unsplash.com/photo-1522307837370-cc113a36b784?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=3&amp;w=256&amp;h=256&amp;q=80"></div>

Badges

Documentation and illustrative instances showcasing badges, which serve as our compact count and labeling element.

Primary Secondary Success Danger Warning Info Light Dark
<span class="badge text-bg-primary">Primary</span> <span class="badge text-bg-secondary">Secondary</span> <span class="badge text-bg-success">Success</span> <span class="badge text-bg-danger">Danger</span> <span class="badge text-bg-warning">Warning</span> <span class="badge text-bg-info">Info</span> <span class="badge text-bg-light">Light</span> <span class="badge text-bg-dark">Dark</span>

Buttons

Solid buttons

<button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button> <button type="button" class="btn btn-link">Link</button>

Outline buttons

<button type="button" class="btn btn-outline-primary">Primary</button> <button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-success">Success</button> <button type="button" class="btn btn-outline-danger">Danger</button> <button type="button" class="btn btn-outline-warning">Warning</button> <button type="button" class="btn btn-outline-info">Info</button> <button type="button" class="btn btn-outline-light">Light</button> <button type="button" class="btn btn-outline-dark">Dark</button>

Soft buttons

<button type="button" class="btn bg-primary bg-opacity-25 bg-opacity-100-hover text-primary text-white-hover">Primary</button> <button type="button" class="btn bg-secondary bg-opacity-25 bg-opacity-100-hover text-secondary text-white-hover">Secondary</button> <button type="button" class="btn bg-success bg-opacity-25 bg-opacity-100-hover text-success text-white-hover">Success</button> <button type="button" class="btn bg-danger bg-opacity-25 bg-opacity-100-hover text-danger text-white-hover">Danger</button> <button type="button" class="btn bg-warning bg-opacity-25 bg-opacity-100-hover text-warning text-white-hover">Warning</button> <button type="button" class="btn bg-info bg-opacity-25 bg-opacity-100-hover text-info text-white-hover">Info</button>

Button Group

Cards

Bootstrap cards offer a versatile and customizable content holder with numerous variations and choices. For a comprehensive list of options, we recommend referring to the official Bootstrap documentation.

Activity timeline card

Asset Allocation
...
Price: $0.32

...
Price: $0.32

...
Price: $0.32

...
Price: $0.32

...
Price: $0.32

<div class="card">
  <div class="card-body pb-3">
    <h5 class="mb-3">Asset Allocation</h5>
    <div class="list-group list-group-flush">
      <div class="list-group-item d-flex align-items-center border-0 py-3">
        <div class="flex-none w-rem-10 h-rem-10"><img src="../../img/crypto/icon/btc.svg" class="w-100" alt="..."></div>
        <div class="flex-fill ms-4 text-limit">
          <div class="d-flex align-items-center justify-content-between"><a href="#" class="d-block text-sm text-heading fw-bold">Bitcoin</a> <span class="text-muted text-xs fw-semibold">47%</span></div>
          <div class="progress progress-sm my-1">
            <div class="progress-bar bg-primary" role="progressbar" style="width:47%" aria-valuenow="47" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <div class="d-flex justify-content-between text-xs text-muted text-end mt-1">
            <div><span class="font-weight-bold text-muted">Price: $0.32</span></div>
            <div>
              <p class="card-text text-muted"><time datetime="2020-06-23">Value: $$23,000.00</time></p>
            </div>
          </div>
        </div>
        <div class="text-end ms-7">
          <div class="dropdown"><a class="text-muted" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="bi bi-three-dots-vertical"></i></a>
            <div class="dropdown-menu dropdown-menu-end"><a href="#!" class="dropdown-item">Action </a><a href="#!" class="dropdown-item">Another action </a><a href="#!" class="dropdown-item">Something else here</a></div>
          </div>
        </div>
      </div>
      <div class="list-group-item d-flex align-items-center border-0 py-3">
        <div class="flex-none w-rem-10 h-rem-10"><img src="../../img/crypto/icon/eth.svg" class="w-100" alt="..."></div>
        <div class="flex-fill ms-4 text-limit">
          <div class="d-flex align-items-center justify-content-between"><a href="#" class="d-block text-sm text-heading fw-bold">Ethereum</a> <span class="text-muted text-xs fw-semibold">47%</span></div>
          <div class="progress progress-sm my-1">
            <div class="progress-bar bg-primary" role="progressbar" style="width:47%" aria-valuenow="47" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <div class="d-flex justify-content-between text-xs text-muted text-end mt-1">
            <div><span class="font-weight-bold text-muted">Price: $0.32</span></div>
            <div>
              <p class="card-text text-muted"><time datetime="2020-06-23">Value: $$7,500.00</time></p>
            </div>
          </div>
        </div>
        <div class="text-end ms-7">
          <div class="dropdown"><a class="text-muted" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="bi bi-three-dots-vertical"></i></a>
            <div class="dropdown-menu dropdown-menu-end"><a href="#!" class="dropdown-item">Action </a><a href="#!" class="dropdown-item">Another action </a><a href="#!" class="dropdown-item">Something else here</a></div>
          </div>
        </div>
      </div>
      <div class="list-group-item d-flex align-items-center border-0 py-3">
        <div class="flex-none w-rem-10 h-rem-10"><img src="../../img/crypto/icon/ada.svg" class="w-100" alt="..."></div>
        <div class="flex-fill ms-4 text-limit">
          <div class="d-flex align-items-center justify-content-between"><a href="#" class="d-block text-sm text-heading fw-bold">Cardano</a> <span class="text-muted text-xs fw-semibold">47%</span></div>
          <div class="progress progress-sm my-1">
            <div class="progress-bar bg-primary" role="progressbar" style="width:47%" aria-valuenow="47" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <div class="d-flex justify-content-between text-xs text-muted text-end mt-1">
            <div><span class="font-weight-bold text-muted">Price: $0.32</span></div>
            <div>
              <p class="card-text text-muted"><time datetime="2020-06-23">Value: $$33,500.00</time></p>
            </div>
          </div>
        </div>
        <div class="text-end ms-7">
          <div class="dropdown"><a class="text-muted" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="bi bi-three-dots-vertical"></i></a>
            <div class="dropdown-menu dropdown-menu-end"><a href="#!" class="dropdown-item">Action </a><a href="#!" class="dropdown-item">Another action </a><a href="#!" class="dropdown-item">Something else here</a></div>
          </div>
        </div>
      </div>
      <div class="list-group-item d-flex align-items-center border-0 py-3">
        <div class="flex-none w-rem-10 h-rem-10"><img src="../../img/crypto/icon/bnb.svg" class="w-100" alt="..."></div>
        <div class="flex-fill ms-4 text-limit">
          <div class="d-flex align-items-center justify-content-between"><a href="#" class="d-block text-sm text-heading fw-bold">Binance</a> <span class="text-muted text-xs fw-semibold">47%</span></div>
          <div class="progress progress-sm my-1">
            <div class="progress-bar bg-primary" role="progressbar" style="width:47%" aria-valuenow="47" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <div class="d-flex justify-content-between text-xs text-muted text-end mt-1">
            <div><span class="font-weight-bold text-muted">Price: $0.32</span></div>
            <div>
              <p class="card-text text-muted"><time datetime="2020-06-23">Value: $$5,500.00</time></p>
            </div>
          </div>
        </div>
        <div class="text-end ms-7">
          <div class="dropdown"><a class="text-muted" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="bi bi-three-dots-vertical"></i></a>
            <div class="dropdown-menu dropdown-menu-end"><a href="#!" class="dropdown-item">Action </a><a href="#!" class="dropdown-item">Another action </a><a href="#!" class="dropdown-item">Something else here</a></div>
          </div>
        </div>
      </div>
      <div class="list-group-item d-flex align-items-center border-0 py-3">
        <div class="flex-none w-rem-10 h-rem-10"><img src="../../img/crypto/icon/bnb.svg" class="w-100" alt="..."></div>
        <div class="flex-fill ms-4 text-limit">
          <div class="d-flex align-items-center justify-content-between"><a href="#" class="d-block text-sm text-heading fw-bold">Linkchain</a> <span class="text-muted text-xs fw-semibold">47%</span></div>
          <div class="progress progress-sm my-1">
            <div class="progress-bar bg-primary" role="progressbar" style="width:47%" aria-valuenow="47" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <div class="d-flex justify-content-between text-xs text-muted text-end mt-1">
            <div><span class="font-weight-bold text-muted">Price: $0.32</span></div>
            <div>
              <p class="card-text text-muted"><time datetime="2020-06-23">Value: $$5,500.00</time></p>
            </div>
          </div>
        </div>
        <div class="text-end ms-7">
          <div class="dropdown"><a class="text-muted" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="bi bi-three-dots-vertical"></i></a>
            <div class="dropdown-menu dropdown-menu-end"><a href="#!" class="dropdown-item">Action </a><a href="#!" class="dropdown-item">Another action </a><a href="#!" class="dropdown-item">Something else here</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Card with balance stats

Balance
7.8%
23.863,21 USDT
Income
$23.863,21 USD
Expenses
$5.678,45 USD
<div class="card">
  <div class="card-body d-flex flex-column">
    <div class="d-flex justify-content-between align-items-center mb-3">
      <div>
        <h5>Balance</h5>
      </div>
      <div><span class="text-heading fw-bold"><i class="bi bi-arrow-up me-2"></i>7.8%</span></div>
    </div>
    <div class="text-2xl fw-bolder text-heading ls-tight">23.863,21 USDT</div>
    <div class="d-flex align-items-center justify-content-between mt-8">
      <div class="">
        <div class="d-flex gap-3 align-items-center">
          <div class="icon icon-sm icon-shape text-sm rounded-circle bg-dark text-success"><i class="bi bi-arrow-down"></i></div><span class="h6 fw-semibold text-muted">Income</span>
        </div>
        <div class="fw-bold text-heading mt-3">$23.863,21 USD</div>
      </div><span class="vr bg-dark bg-opacity-10"></span>
      <div class="">
        <div class="d-flex gap-3 align-items-center">
          <div class="icon icon-sm icon-shape text-sm rounded-circle bg-dark text-danger"><i class="bi bi-arrow-up"></i></div><span class="h6 fw-semibold text-muted">Expenses</span>
        </div>
        <div class="fw-bold text-heading mt-3">$5.678,45 USD</div>
      </div>
    </div>
  </div>
</div>

Card with charts

Earnings
<div class="card">
  <div class="card-body pb-0">
    <div class="d-flex justify-content-between align-items-center">
      <div>
        <h5>Earnings</h5>
      </div>
      <div class="hstack align-items-center"><a href="#" class="text-muted"><i class="bi bi-arrow-repeat"></i></a></div>
    </div>
    <div class="mx-n4">
      <div id="chart-users" data-height="250"></div>
    </div>
  </div>
</div>

Performance
<div class="card">
  <div class="card-body pb-0">
    <div class="d-flex justify-content-between align-items-center">
      <div>
        <h5>Performance</h5>
      </div>
      <div class="hstack align-items-center"><a href="#" class="text-muted"><i class="bi bi-arrow-repeat"></i></a></div>
    </div>
    <div class="mx-n4">
      <div id="chart-line" data-height="245"></div>
    </div>
  </div>
</div>

BTC to EUR Chart
<div class="card">
  <div class="card-body pb-0">
    <div class="row g-3 justify-content-between align-items-center">
      <div class="col-12 col-sm">
        <h5>BTC to EUR Chart</h5>
      </div>
      <div class="col-12 col-sm-auto">
        <div class="d-flex scrollable-x justify-content-between gap-1 p-1 align-items-center bg-body-secondary rounded text-xs fw-semibold"><a href="#" class="px-3 py-1 text-muted bg-white-hover bg-opacity-70-hover rounded">1H </a><a href="#" class="px-3 py-1 text-muted bg-white rounded shadow-1">1D </a><a href="#" class="px-3 py-1 text-muted bg-white-hover bg-opacity-50-hover rounded">1W </a><a href="#" class="px-3 py-1 text-muted bg-white-hover bg-opacity-50-hover rounded">1M </a><a href="#" class="d-none d-sm-inline-block px-3 py-1 text-muted bg-white-hover bg-opacity-50-hover rounded">1Y</a></div>
      </div>
    </div>
    <div class="mx-n4">
      <div id="chart-crypto-price" data-height="370"></div>
    </div>
  </div>
</div>

Earnings
<div class="card">
  <div class="card-body pb-0">
    <div class="d-flex justify-content-between align-items-center">
      <div>
        <h5>Earnings</h5>
      </div>
      <div class="hstack align-items-center"><a href="#" class="text-muted"><i class="bi bi-arrow-repeat"></i></a></div>
    </div>
    <div class="mx-n4">
      <div id="chart-bar" data-height="250"></div>
    </div>
  </div>
</div>

Card with icons

<div class="position-relative d-flex align-items-center gap-3 bg-body-secondary bg-primary-hover rounded p-2">
  <div class="icon icon-shape rounded text-bg-primary text-lg"><i class="bi bi-star"></i></div><a href="#" class="stretched-link text-heading fw-bold">Top movers</a>
</div>

...
Bitcoin BTC/EUR
<div class="card border-primary-hover">
  <div class="card-body d-flex gap-3"><img src="../../img/crypto/icon/btc.svg" class="w-rem-7 h-rem-7 mt-1" alt="...">
    <div class=""><span class="d-block text-muted mb-1">Bitcoin</span> <span class="d-block text-lg fw-bold text-heading">BTC/EUR</span></div><span class="stretched-link ms-auto text-muted text-primary-hover" data-bs-target="#cryptoModal" data-bs-toggle="modal" role="button"><i class="bi bi-chevron-down"></i></span>
  </div>
</div>

Card with order history

Recent transactions
...
Bitcoin

Pending - 3 min ago

-1,500 USD
...
Cardano

Canceled - 3 min ago

-1,500 USD
...
Binance

Pending - 3 min ago

-1,500 USD
...
Bitcoin

Pending - 3 min ago

-1,500 USD
...
Bitcoin

Pending - 3 min ago

-1,500 USD
<div class="card">
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-center mb-5">
      <div>
        <h5>Recent transactions</h5>
      </div>
      <div class="hstack align-items-center"><a href="#" class="text-muted"><i class="bi bi-arrow-repeat"></i></a></div>
    </div>
    <div class="vstack gap-6">
      <div>
        <div class="d-flex align-items-center gap-3">
          <div class="icon icon-shape flex-none text-base text-bg-dark rounded-circle"><img src="../../img/crypto/white/btc.svg" class="w-rem-6 h-rem-6" alt="..."></div>
          <div>
            <h6 class="progress-text mb-1 d-block">Bitcoin</h6>
            <p class="text-muted text-xs">Pending - 3 min ago</p>
          </div>
          <div class="text-end ms-auto"><span class="h6 text-sm">-1,500 USD</span></div>
        </div>
      </div>
      <div>
        <div class="d-flex align-items-center gap-3">
          <div class="icon icon-shape flex-none text-base text-bg-dark rounded-circle"><img src="../../img/crypto/white/ada.svg" class="w-rem-6 h-rem-6" alt="..."></div>
          <div>
            <h6 class="progress-text mb-1 d-block">Cardano</h6>
            <p class="text-muted text-xs">Canceled - 3 min ago</p>
          </div>
          <div class="text-end ms-auto"><span class="h6 text-sm">-1,500 USD</span></div>
        </div>
      </div>
      <div>
        <div class="d-flex align-items-center gap-3">
          <div class="icon icon-shape flex-none text-base text-bg-dark rounded-circle"><img src="../../img/crypto/white/bnb.svg" class="w-rem-6 h-rem-6" alt="..."></div>
          <div>
            <h6 class="progress-text mb-1 d-block">Binance</h6>
            <p class="text-muted text-xs">Pending - 3 min ago</p>
          </div>
          <div class="text-end ms-auto"><span class="h6 text-sm">-1,500 USD</span></div>
        </div>
      </div>
      <div>
        <div class="d-flex align-items-center gap-3">
          <div class="icon icon-shape flex-none text-base text-bg-dark rounded-circle"><img src="../../img/crypto/white/btc.svg" class="w-rem-6 h-rem-6" alt="..."></div>
          <div>
            <h6 class="progress-text mb-1 d-block">Bitcoin</h6>
            <p class="text-muted text-xs">Pending - 3 min ago</p>
          </div>
          <div class="text-end ms-auto"><span class="h6 text-sm">-1,500 USD</span></div>
        </div>
      </div>
      <div>
        <div class="d-flex align-items-center gap-3">
          <div class="icon icon-shape flex-none text-base text-bg-dark rounded-circle"><img src="../../img/crypto/white/btc.svg" class="w-rem-6 h-rem-6" alt="..."></div>
          <div>
            <h6 class="progress-text mb-1 d-block">Bitcoin</h6>
            <p class="text-muted text-xs">Pending - 3 min ago</p>
          </div>
          <div class="text-end ms-auto"><span class="h6 text-sm">-1,500 USD</span></div>
        </div>
      </div>
    </div>
  </div>
</div>

Transaction History
Bitcoin 2 days ago
0xd029384sd343fd...eq23
Pending
+0.2948 BTC +$10,930.90
Cardano 2 days ago
0xd029384sd343fd...eq23
Canceled
+0.2948 BTC +$10,930.90
Binance 2 days ago
0xd029384sd343fd...eq23
Successful
+0.2948 BTC +$10,930.90
Bitcoin 2 days ago
0xd029384sd343fd...eq23
Pending
+0.2948 BTC +$10,930.90
Bitcoin 2 days ago
0xd029384sd343fd...eq23
Canceled
+0.2948 BTC +$10,930.90
Bitcoin 2 days ago
0xd029384sd343fd...eq23
Successful
+0.2948 BTC +$10,930.90
Bitcoin 2 days ago
0xd029384sd343fd...eq23
Successful
+0.2948 BTC +$10,930.90
Bitcoin 2 days ago
0xd029384sd343fd...eq23
Successful
+0.2948 BTC +$10,930.90
<div class="card">
  <div class="card-body pb-0">
    <div class="d-flex justify-content-between align-items-center">
      <div>
        <h5>Transaction History</h5>
      </div>
      <div class="hstack align-items-center"><a href="#" class="text-muted"><i class="bi bi-arrow-repeat"></i></a></div>
    </div>
    <div class="list-group list-group-flush">
      <div class="list-group-item d-flex align-items-center justify-content-between gap-6">
        <div class="d-flex align-items-center gap-3">
          <div class="icon icon-shape rounded-circle icon-sm flex-none w-rem-10 h-rem-10 text-sm bg-primary bg-opacity-25 text-primary"><i class="bi bi-send-fill"></i></div>
          <div class=""><span class="d-block text-heading text-sm fw-semibold">Bitcoin </span><span class="d-none d-sm-block text-muted text-xs">2 days ago</span></div>
        </div>
        <div class="d-none d-md-block text-sm">0xd029384sd343fd...eq23</div>
        <div class="d-none d-md-block"><span class="badge bg-body-secondary text-warning">Pending</span></div>
        <div class="text-end"><span class="d-block text-heading text-sm fw-bold">+0.2948 BTC </span><span class="d-block text-muted text-xs">+$10,930.90</span></div>
      </div>
      <div class="list-group-item d-flex align-items-center justify-content-between gap-6">
        <div class="d-flex align-items-center gap-3">
          <div class="icon icon-shape rounded-circle icon-sm flex-none w-rem-10 h-rem-10 text-sm bg-primary bg-opacity-25 text-primary"><i class="bi bi-send-fill"></i></div>
          <div class=""><span class="d-block text-heading text-sm fw-semibold">Cardano </span><span class="d-none d-sm-block text-muted text-xs">2 days ago</span></div>
        </div>
        <div class="d-none d-md-block text-sm">0xd029384sd343fd...eq23</div>
        <div class="d-none d-md-block"><span class="badge bg-body-secondary text-danger">Canceled</span></div>
        <div class="text-end"><span class="d-block text-heading text-sm fw-bold">+0.2948 BTC </span><span class="d-block text-muted text-xs">+$10,930.90</span></div>
      </div>
      <div class="list-group-item d-flex align-items-center justify-content-between gap-6">
        <div class="d-flex align-items-center gap-3">
          <div class="icon icon-shape rounded-circle icon-sm flex-none w-rem-10 h-rem-10 text-sm bg-primary bg-opacity-25 text-primary"><i class="bi bi-send-fill"></i></div>
          <div class=""><span class="d-block text-heading text-sm fw-semibold">Binance </span><span class="d-none d-sm-block text-muted text-xs">2 days ago</span></div>
        </div>
        <div class="d-none d-md-block text-sm">0xd029384sd343fd...eq23</div>
        <div class="d-none d-md-block"><span class="badge bg-body-secondary text-success">Successful</span></div>
        <div class="text-end"><span class="d-block text-heading text-sm fw-bold">+0.2948 BTC </span><span class="d-block text-muted text-xs">+$10,930.90</span></div>
      </div>
      <div class="list-group-item d-flex align-items-center justify-content-between gap-6">
        <div class="d-flex align-items-center gap-3">
          <div class="icon icon-shape rounded-circle icon-sm flex-none w-rem-10 h-rem-10 text-sm bg-primary bg-opacity-25 text-primary"><i class="bi bi-send-fill"></i></div>
          <div class=""><span class="d-block text-heading text-sm fw-semibold">Bitcoin </span><span class="d-none d-sm-block text-muted text-xs">2 days ago</span></div>
        </div>
        <div class="d-none d-md-block text-sm">0xd029384sd343fd...eq23</div>
        <div class="d-none d-md-block"><span class="badge bg-body-secondary text-warning">Pending</span></div>
        <div class="text-end"><span class="d-block text-heading text-sm fw-bold">+0.2948 BTC </span><span class="d-block text-muted text-xs">+$10,930.90</span></div>
      </div>
      <div class="list-group-item d-flex align-items-center justify-content-between gap-6">
        <div class="d-flex align-items-center gap-3">
          <div class="icon icon-shape rounded-circle icon-sm flex-none w-rem-10 h-rem-10 text-sm bg-primary bg-opacity-25 text-primary"><i class="bi bi-send-fill"></i></div>
          <div class=""><span class="d-block text-heading text-sm fw-semibold">Bitcoin </span><span class="d-none d-sm-block text-muted text-xs">2 days ago</span></div>
        </div>
        <div class="d-none d-md-block text-sm">0xd029384sd343fd...eq23</div>
        <div class="d-none d-md-block"><span class="badge bg-body-secondary text-danger">Canceled</span></div>
        <div class="text-end"><span class="d-block text-heading text-sm fw-bold">+0.2948 BTC </span><span class="d-block text-muted text-xs">+$10,930.90</span></div>
      </div>
      <div class="list-group-item d-flex align-items-center justify-content-between gap-6">
        <div class="d-flex align-items-center gap-3">
          <div class="icon icon-shape rounded-circle icon-sm flex-none w-rem-10 h-rem-10 text-sm bg-primary bg-opacity-25 text-primary"><i class="bi bi-send-fill"></i></div>
          <div class=""><span class="d-block text-heading text-sm fw-semibold">Bitcoin </span><span class="d-none d-sm-block text-muted text-xs">2 days ago</span></div>
        </div>
        <div class="d-none d-md-block text-sm">0xd029384sd343fd...eq23</div>
        <div class="d-none d-md-block"><span class="badge bg-body-secondary text-success">Successful</span></div>
        <div class="text-end"><span class="d-block text-heading text-sm fw-bold">+0.2948 BTC </span><span class="d-block text-muted text-xs">+$10,930.90</span></div>
      </div>
      <div class="list-group-item d-flex align-items-center justify-content-between gap-6">
        <div class="d-flex align-items-center gap-3">
          <div class="icon icon-shape rounded-circle icon-sm flex-none w-rem-10 h-rem-10 text-sm bg-primary bg-opacity-25 text-primary"><i class="bi bi-send-fill"></i></div>
          <div class=""><span class="d-block text-heading text-sm fw-semibold">Bitcoin </span><span class="d-none d-sm-block text-muted text-xs">2 days ago</span></div>
        </div>
        <div class="d-none d-md-block text-sm">0xd029384sd343fd...eq23</div>
        <div class="d-none d-md-block"><span class="badge bg-body-secondary text-success">Successful</span></div>
        <div class="text-end"><span class="d-block text-heading text-sm fw-bold">+0.2948 BTC </span><span class="d-block text-muted text-xs">+$10,930.90</span></div>
      </div>
      <div class="list-group-item d-flex align-items-center justify-content-between gap-6">
        <div class="d-flex align-items-center gap-3">
          <div class="icon icon-shape rounded-circle icon-sm flex-none w-rem-10 h-rem-10 text-sm bg-primary bg-opacity-25 text-primary"><i class="bi bi-send-fill"></i></div>
          <div class=""><span class="d-block text-heading text-sm fw-semibold">Bitcoin </span><span class="d-none d-sm-block text-muted text-xs">2 days ago</span></div>
        </div>
        <div class="d-none d-md-block text-sm">0xd029384sd343fd...eq23</div>
        <div class="d-none d-md-block"><span class="badge bg-body-secondary text-success">Successful</span></div>
        <div class="text-end"><span class="d-block text-heading text-sm fw-bold">+0.2948 BTC </span><span class="d-block text-muted text-xs">+$10,930.90</span></div>
      </div>
    </div>
  </div>
</div>

NFT cards

...
Cool Cookies
#6504
Price: 3.5 ETH
<div class="card">
  <div class="position-relative group-item-invisible group-item-visible-hover"><img src="../../img/nfts/img-1.png" class="card-img-top" alt="...">
    <div class="group-item rounded-top d-flex flex-column p-4 position-absolute top-0 start-0 w-100 h-100 bg-dark bg-opacity-25">
      <div class="d-flex justify-content-between"><button type="button" class="btn btn-sm btn-square border-0 text-bg-dark bg-opacity-70 bg-opacity-100-hover" data-bs-toggle="offcanvas" data-bs-target="#cartOffcanvas" aria-controls="cartOffcanvas"><i class="bi bi-basket"></i></button> <button type="button" class="btn btn-sm btn-square border-0 text-bg-dark bg-opacity-70 bg-opacity-100-hover"><i class="bi bi-heart"></i></button></div>
      <div class="text-center mt-auto"><button type="button" class="btn btn-sm btn-white" data-bs-toggle="modal" data-bs-target="#buyNftModal"><img src="../../img/crypto/icon/eth.svg" class="w-rem-5 h-rem-5 me-2" alt="..."> <span>Buy now</span></button></div>
    </div>
  </div>
  <div class="card-body p-3">
    <div class="d-flex align-items-center gap-2"><span class="h6 text-sm">Cool Cookies</span> <span class="icon icon-sm text-sm rounded-circle bg-success text-white"><i class="bi bi-check"></i></span></div>
    <div class="text-sm text-muted my-1">#6504</div>
    <div class="d-flex align-items-center gap-1 text-sm"><span class="text-muted">Price:</span> <span class="d-block text-heading fw-bold">3.5 ETH</span></div>
  </div>
</div>

...

Crypto Unicorns Market
3.5 ETH 1 of 100
2h 30m 40s left
Make offer
<div class="card"><img src="../../img/nfts/collection-1.png" class="card-img-top" alt="...">
  <div class="card-body"><span class="d-block text-heading text-base fw-bold">Crypto Unicorns Market</span>
    <div class="d-flex align-items-center justify-content-between"><span class="d-block text-primary text-base fw-bold">3.5 ETH</span> <span class="d-block text-muted text-sm">1 of 100</span></div>
    <div class="d-flex gap-2 justify-content-between mt-5">
      <div class="rounded-pill px-4 py-2 bg-body-secondary text-sm">2h 30m 40s left</div><a href="./nft-details.html" class="btn btn-sm btn-dark">Make offer</a>
    </div>
  </div>
</div>

...

Crypto Unicorns Market
3.5 ETH 1 of 100
8,888 items
See collection
<div class="card"><img src="../../img/nfts/collection-1.png" class="card-img-top" alt="...">
  <div class="card-body"><span class="d-block text-heading text-base fw-bold">Crypto Unicorns Market</span>
    <div class="d-flex align-items-center justify-content-between"><span class="d-block text-primary text-base fw-bold">3.5 ETH</span> <span class="d-block text-muted text-sm">1 of 100</span></div>
    <div class="d-flex gap-2 justify-content-between mt-5">
      <div class="rounded-pill px-4 py-2 bg-body-secondary text-sm">8,888 items</div><a href="./nft-collection.html" class="btn btn-sm btn-dark">See collection</a>
    </div>
  </div>
</div>

Payment cards

Cards List
My cards
...
**4291 - Exp: 12/26
Active
Last used: 2 hrs ago
...
**4291 - Exp: 12/26
Active
Last used: 2 hrs ago
Team cards
Team cards will appear here
<div class="card">
  <div class="card-body pb-0">
    <div class="mb-2 d-flex align-items-center">
      <h5>Cards List</h5>
      <div class="ms-auto text-end"><a href="#" class="text-sm fw-semibold">Edit</a></div>
    </div>
    <div class="hstack gap-2 mt-4 mb-6"><button class="btn btn-sm btn-neutral"><i class="bi bi-plus me-2 d-none d-sm-inline-block"></i>New card</button> <button class="btn btn-sm btn-neutral"><i class="bi bi-gear me-2 d-none d-sm-inline-block"></i>Manage</button></div>
    <div class="surtitle mb-2">My cards</div>
    <div class="vstack gap-2 mx-n3">
      <div class="position-relative d-flex align-items-center p-3 rounded-3 bg-body-secondary-hover">
        <div class="flex-none"><img src="../../img/cards/visa.svg" class="w-rem-16 w-md-20 rounded" alt="..."></div>
        <div class="ms-3 ms-md-4 flex-fill">
          <div class="stretched-link text-limit text-sm text-heading fw-semibold" role="button" data-bs-toggle="offcanvas" data-bs-target="#cardDetailsOffcanvas" aria-controls="cardDetailsOffcanvas">John Snow - Metal</div>
          <div class="d-block text-xs gap-2 mt-1"><span>**4291 - Exp: 12/26</span></div>
        </div>
        <div class="d-none d-sm-block ms-auto text-end"><span class="badge bg-body-secondary text-success">Active</span>
          <div class="d-none d-sm-block text-xs text-muted mt-2">Last used: 2 hrs ago</div>
        </div>
      </div>
      <div class="position-relative d-flex align-items-center p-3 rounded-3 bg-body-secondary-hover">
        <div class="flex-none"><img src="../../img/cards/mastercard.svg" class="w-rem-16 w-md-20 rounded" alt="..."></div>
        <div class="ms-3 ms-md-4 flex-fill">
          <div class="stretched-link text-limit text-sm text-heading fw-semibold" role="button" data-bs-toggle="offcanvas" data-bs-target="#cardDetailsOffcanvas" aria-controls="cardDetailsOffcanvas">John Snow - Virtual</div>
          <div class="d-block text-xs gap-2"><span>**4291 - Exp: 12/26</span></div>
        </div>
        <div class="d-none d-sm-block ms-auto text-end"><span class="badge bg-body-secondary text-success">Active</span>
          <div class="d-none d-sm-block text-xs text-muted mt-2">Last used: 2 hrs ago</div>
        </div>
      </div>
    </div>
    <div class="surtitle mt-6">Team cards</div>
    <div class="list-group list-group-flush">
      <div class="list-group-item d-flex align-items-center px-0">
        <div><span class="d-flex align-items-center justify-content-center w-rem-16 w-md-20 py-3 rounded text-muted text-lg bg-body-secondary"><i class="bi bi-credit-card"></i></span></div>
        <div class="ms-3 ms-md-4 flex-fill">
          <div class="text-muted text-sm fw-semibold">Team cards will appear here</div>
        </div>
      </div>
    </div>
  </div>
</div>

Standard Plan

The perfect way to get started.

$ 59 / month
30 days 12 days left

<div class="card">
  <div class="card-body py-4">
    <div class="d-flex flex-wrap align-items-center justify-content-between mb-5">
      <div class="flex-1">
        <h6 class="h5 text-limit fw-semibold mb-1">Standard Plan</h6>
        <p class="text-sm text-muted d-none d-sm-block">The perfect way to get started.</p>
      </div>
      <div class="ms-sm-auto">
        <div class="d-flex align-items-center mt-5 mb-3 lh-none text-heading d-block display-5 ls-tight mb-0"><span class="fw-semibold text-2xl align-self-start mt-1 me-1">$</span> <span>59</span> <span class="d-inline-block fw-normal text-muted text-lg mt-sm-3 ms-1">/ month</span></div>
      </div>
    </div>
    <div class="d-flex align-items-center justify-content-between mb-1"><span class="text-sm text-muted fw-semibold text-heading d-block">30 days</span> <span class="text-sm text-muted fw-semibold d-block">12 days left</span></div>
    <div class="progress progress-sm shadow-none mb-6">
      <div class="progress-bar bg-primary" role="progressbar" style="width:70%" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <hr class="my-4">
    <div class="d-flex flex-wrap gap-2 align-items-center justify-content-between"><a href="#" class="text-muted text-danger-hover text-sm fw-semibold">Cancel plan</a> <a href="#" class="btn btn-sm btn-neutral">Change plan</a></div>
  </div>
</div>

Progress cards

65%
Today's Spendings 370,00 EUR
Daily Spending Limit 7.500,00 EUR
<div class="card">
  <div class="card-body">
    <div class="d-flex align-items-start gap-4">
      <div class="flex-none progress-circle progress-circle-xl progress-circle-primary text-light" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" role="progressbar" style="--value:65"><span class="text-primary fw-bold">65%</span></div>
      <div>
        <div class="mb-2"><span class="d-block text-xs text-muted text-opacity-75">Today&#39;s Spendings</span> <span class="d-block fw-bold text-heading text-sm">370,00 EUR</span></div>
        <div><span class="d-block text-xs text-muted text-opacity-75">Daily Spending Limit</span> <span class="d-block fw-bold text-heading text-sm">7.500,00 EUR</span></div>
      </div>
    </div>
  </div>
</div>

Spending limits
Daily transaction limit
$399.00 spent of $2000.00 20%
<div class="card">
  <div class="card-body">
    <h5 class="mb-4">Spending limits</h5>
    <div class="vstack gap-3">
      <div class="surtitle text-xs text-muted text-opacity-75">Daily transaction limit</div>
      <div class="progress w-100">
        <div class="progress-bar bg-primary" role="progressbar" aria-label="Basic example" style="width:20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
      <div class="d-flex justify-content-between text-xs"><span>$399.00 spent of $2000.00</span> <span>20%</span></div>
    </div>
  </div>
</div>

Stats cards

...
USDT
Total balance
75.800,00 USDT
<div class="card bg-tertiary bg-opacity-10 border-tertiary border-opacity-40">
  <div class="card-body d-flex flex-column p-4">
    <div class="d-flex align-items-center gap-2"><img src="../../img/crypto/icon/usdt.svg" class="w-rem-5 flex-none" alt="...">
      <h6>USDT</h6>
    </div>
    <div class="mt-auto">
      <div class="text-xs mt-4">Total balance</div>
      <div class="text-sm fw-semibold">75.800,00 USDT</div>
    </div>
  </div>
</div>

3.2893 USDT
+13.7%
<div class="card border-primary-hover">
  <div class="card-body p-4">
    <div class="d-flex align-items-center gap-2"><img src="../../img/crypto/icon/btc.svg" class="w-rem-5 flex-none" alt="..."> <a href="/pages/page-details.html" class="h6 stretched-link">BTC</a></div>
    <div class="text-sm fw-semibold mt-3">3.2893 USDT</div>
    <div class="d-flex align-items-center gap-2 mt-1 text-xs"><span class="badge badge-xs bg-success"><i class="bi bi-arrow-up-right"></i> </span><span>+13.7%</span></div>
  </div>
</div>

Orders
EUR 25.040,00

20% vs last week

<div class="card">
  <div class="p-4">
    <h6 class="text-limit text-muted mb-3">Orders</h6><span class="text-sm text-muted text-opacity-90 fw-semibold">EUR</span> <span class="d-block h3 ls-tight fw-bold">25.040,00</span>
    <p class="mt-1"><span class="text-success text-xs"><i class="fas fa-arrow-up me-1"></i>20% </span><span class="text-muted text-xs text-opacity-75">vs last week</span></p>
  </div>
</div>

Market Cap
$19,3M +7.57%
<div class="card">
  <div class="card-body">
    <div class="d-flex gap-3 mb-1"><span class="text-muted">Market Cap</span></div>
    <div class="d-flex align-items-center"><span class="text-lg text-heading fw-bold">$19,3M </span><span class="ms-auto text-success text-sm fw-semibold">+7.57%</span></div>
  </div>
</div>

User dropdown

Forms

Login form

<form>
  <div class="mb-5"><label class="form-label" for="email">Email address</label> <input type="email" class="form-control" id="email"></div>
  <div class="mb-5">
    <div class="d-flex justify-content-between gap-2 mb-2 align-items-center"><label class="form-label mb-0" for="password">Password</label> <a href="#" class="text-sm text-muted text-primary-hover text-underline">Forgot password?</a></div><input type="password" class="form-control" id="password" autocomplete="current-password">
  </div>
  <div class="mb-5">
    <div class="form-check"><input class="form-check-input" type="checkbox" name="check_example" id="check_example"> <label class="form-check-label" for="check_example">Keep me logged in</label></div>
  </div>
  <div><a href="#" class="btn btn-dark w-100">Sign in</a></div>
</form>

Register form

<form>
  <div class="row g-5">
    <div class="col-sm-6"><label class="form-label">First name</label> <input type="text" class="form-control"></div>
    <div class="col-sm-6"><label class="form-label">Last name</label> <input type="text" class="form-control"></div>
    <div class="col-sm-12"><label class="form-label">Email address</label> <input type="email" class="form-control"></div>
    <div class="col-sm-12"><label class="form-label">Password</label> <input type="password" class="form-control"></div>
    <div class="col-sm-12"><label class="form-label">How did you hear about us?</label> <select class="form-select" aria-label="Default select example">
        <option selected="selected">From a friend</option>
        <option value="1">Online search</option>
        <option value="2">Social media</option>
        <option value="3">Advertising</option>
      </select></div>
    <div class="col-sm-12"><a href="#" class="btn btn-dark w-100">Sign up</a></div>
  </div>
</form>

List Groups

Crypto list

...
BTC Bitcoin
23.8
...
ETH Ethereum
1.200,50
...
ADA Cardano
10.930,00
...
BNB Binance
200
...
CHAIN Linkchain
200
<div class="px-6 py-5 border-bottom"><input type="text" class="form-control" placeholder="Search token or paste address" aria-label="Search"></div>
<div class="p-2">
  <div class="vstack">
    <div class="position-relative d-flex gap-3 p-4 rounded bg-body-secondary-hover">
      <div class="icon flex-none"><img src="../../img/crypto/color/btc.svg" class="w-rem-10 h-rem-10" alt="..."></div>
      <div class="d-flex flex-fill">
        <div class=""><a href="#" class="stretched-link text-heading fw-bold">BTC</a> <span class="d-block text-muted text-sm">Bitcoin</span></div>
        <div class="ms-auto fw-bold text-heading">23.8</div>
      </div>
    </div>
    <div class="position-relative d-flex gap-3 p-4 rounded bg-body-secondary-hover">
      <div class="icon flex-none"><img src="../../img/crypto/color/eth.svg" class="w-rem-10 h-rem-10" alt="..."></div>
      <div class="d-flex flex-fill">
        <div class=""><a href="#" class="stretched-link text-heading fw-bold">ETH</a> <span class="d-block text-muted text-sm">Ethereum</span></div>
        <div class="ms-auto fw-bold text-heading">1.200,50</div>
      </div>
    </div>
    <div class="position-relative d-flex gap-3 p-4 rounded bg-body-secondary-hover">
      <div class="icon flex-none"><img src="../../img/crypto/color/ada.svg" class="w-rem-10 h-rem-10" alt="..."></div>
      <div class="d-flex flex-fill">
        <div class=""><a href="#" class="stretched-link text-heading fw-bold">ADA</a> <span class="d-block text-muted text-sm">Cardano</span></div>
        <div class="ms-auto fw-bold text-heading">10.930,00</div>
      </div>
    </div>
    <div class="position-relative d-flex gap-3 p-4 rounded bg-body-secondary-hover">
      <div class="icon flex-none"><img src="../../img/crypto/color/bnb.svg" class="w-rem-10 h-rem-10" alt="..."></div>
      <div class="d-flex flex-fill">
        <div class=""><a href="#" class="stretched-link text-heading fw-bold">BNB</a> <span class="d-block text-muted text-sm">Binance</span></div>
        <div class="ms-auto fw-bold text-heading">200</div>
      </div>
    </div>
    <div class="position-relative d-flex gap-3 p-4 rounded bg-body-secondary-hover">
      <div class="icon flex-none"><img src="../../img/crypto/color/chain.svg" class="w-rem-10 h-rem-10" alt="..."></div>
      <div class="d-flex flex-fill">
        <div class=""><a href="#" class="stretched-link text-heading fw-bold">CHAIN</a> <span class="d-block text-muted text-sm">Linkchain</span></div>
        <div class="ms-auto fw-bold text-heading">200</div>
      </div>
    </div>
  </div>
</div>
<div class="px-6 py-5 bg-body-secondary d-flex justify-content-center"><button class="btn btn-sm btn-dark"><i class="bi bi-gear me-2"></i>Manage tokens</button></div>

Crypto list

Security

Select the permissions you want to add to all the projects in this account.

Online transactions

Swipe payments

Contactless payments
<div class="">
  <div class="d-flex">
    <div class="flex-none w-rem-10"><i class="bi bi-folder-plus text-lg text-muted"></i></div>
    <div class="me-10"><a href="#" class="d-block h5">Security</a>
      <p class="mt-1 text-sm text-muted">Select the permissions you want to add to all the projects in this account.</p>
    </div>
  </div>
  <div class="vstack gap-3 mt-4 ms-10">
    <div class="d-flex align-items-center">
      <h6 class="text-sm fw-semibold">Online transactions</h6>
      <div class="form-check form-switch ms-auto"><input class="form-check-input me-n2" type="checkbox" name="switch1" id="switchView1" checked="checked"></div>
    </div>
    <hr class="my-0">
    <div class="d-flex align-items-center">
      <h6 class="fw-semibold">Swipe payments</h6>
      <div class="form-check form-switch ms-auto"><input class="form-check-input me-n2" type="checkbox" name="switch1" id="switchEdit1" checked="checked"></div>
    </div>
    <hr class="my-0">
    <div class="d-flex align-items-center">
      <h6 class="fw-semibold">Contactless payments</h6>
      <div class="form-check form-switch ms-auto"><input class="form-check-input me-n2" type="checkbox" name="switch1" id="switchPublish1"></div>
    </div>
  </div>
</div>

Crypto list

...
Popular
...
Solana
...
Avalanche
...
Solana
By connecting wallet, you agree to Satoshi's Terms of Service
<div class="list-group list-group-flush gap-2">
  <div class="list-group-item border rounded d-flex gap-3 p-4 bg-body-secondary-hover">
    <div class="icon flex-none"><img src="../../img/wallets/metamask.png" class="w-rem-8 h-rem-8" alt="..."></div>
    <div class="d-flex align-items-center flex-fill">
      <div><a href="#" class="stretched-link text-heading text-sm fw-bold">MetaMask</a></div>
      <div class="ms-auto"><span class="badge badge-md text-bg-primary">Popular</span></div>
    </div>
  </div>
  <div class="list-group-item border rounded d-flex gap-3 p-4 bg-body-secondary-hover">
    <div class="icon flex-none"><img src="../../img/wallets/coinbase.webp" class="w-rem-8 h-rem-8" alt="..."></div>
    <div class="d-flex align-items-center flex-fill">
      <div><a href="#" class="stretched-link text-heading text-sm fw-bold">Coinbase Wallet</a></div>
    </div>
  </div>
  <div class="list-group-item border rounded d-flex gap-3 p-4 bg-body-secondary-hover">
    <div class="icon flex-none"><img src="../../img/wallets/walletconnect.png" class="w-rem-8 h-rem-8" alt="..."></div>
    <div class="d-flex align-items-center flex-fill">
      <div><a href="#" class="stretched-link text-heading text-sm fw-bold">WalletConnect</a></div>
    </div>
  </div>
  <div class="list-group-item border rounded d-flex gap-3 p-4 bg-body-secondary-hover">
    <div class="icon flex-none"><img src="../../img/wallets/phantom.png" class="w-rem-8 h-rem-8" alt="..."></div>
    <div class="d-flex align-items-center flex-fill">
      <div><a href="#" class="stretched-link text-heading text-sm fw-bold">Phantom</a></div>
      <div class="ms-auto"><span class="badge badge-md text-bg-light">Solana</span></div>
    </div>
  </div>
  <div class="list-group-item border rounded d-flex gap-3 p-4 bg-body-secondary-hover">
    <div class="icon flex-none"><img src="../../img/wallets/core.png" class="w-rem-8 h-rem-8" alt="..."></div>
    <div class="d-flex align-items-center flex-fill">
      <div><a href="#" class="stretched-link text-heading text-sm fw-bold">Core</a></div>
      <div class="ms-auto"><span class="badge badge-md text-bg-light">Avalanche</span></div>
    </div>
  </div>
  <div class="list-group-item border rounded d-flex gap-3 p-4 bg-body-secondary-hover">
    <div class="icon flex-none"><img src="../../img/wallets/glow.svg" class="w-rem-8 h-rem-8" alt="..."></div>
    <div class="d-flex align-items-center flex-fill">
      <div><a href="#" class="stretched-link text-heading text-sm fw-bold">Glow</a></div>
      <div class="ms-auto"><span class="badge badge-md text-bg-light">Solana</span></div>
    </div>
  </div>
</div>
<div class="text-xs text-muted mt-6">By connecting wallet, you agree to Satoshi's <a href="#" class="fw-bold">Terms of Service</a></div>