Cards

<!-- Basic card example -->
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
  </div>
</div>

<!-- Alternative card style: no border + shadow -->
<div class="card border-0 shadow-sm">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
  </div>
</div>

<!-- Alternative card style: border + shadow -->
<div class="card shadow-sm">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
  </div>
</div>

<!-- Default card hover effect -->
<div class="card card-hover">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
  </div>
</div>

<!-- No border + shadow card hover effect -->
<div class="card border-0 shadow-sm card-hover">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
  </div>
</div>

<!-- Primary background on hover -->
<div class="card border-0 shadow-sm card-hover card-hover-primary">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
  </div>
</div>

<!-- Primary shadow on hover -->
<div class="card border-primary card-hover">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
  </div>
</div>

<!-- Image on top -->
<div class="card">
  <img src="assets/img/landing/financial/services/01.jpg" class="card-img-top" alt="Card image">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
  </div>
</div>

<!-- Image on bottom -->
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
  </div>
  <img src="assets/img/landing/financial/services/03.jpg" class="card-img-bottom" alt="Card image">
</div>

<!-- Horizontal card: Image on the left -->
<div class="card overflow-hidden">
  <div class="row g-0">
    <div class="col-sm-4 bg-repeat-0 bg-size-cover" style="background-image: url(assets/img/team/01.jpg); min-height: 12rem;"></div>
    <div class="col-sm-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
        <a class="btn btn-sm btn-primary" href="#">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

<!-- Horizontal card: Image on the right -->
<div class="card overflow-hidden">
  <div class="row g-0">
    <div class="col-sm-4 order-sm-2 bg-repeat-0 bg-size-cover" style="background-image: url(assets/img/team/02.jpg); min-height: 12rem;"></div>
    <div class="col-sm-8 order-sm-1">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
        <a class="btn btn-sm btn-primary" href="#">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

<!-- Header and footer -->
<div class="card text-center">
  <div class="card-header">Featured</div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer fs-sm text-muted">3 days ago</div>
</div>

<!-- Left aligned (default) -->
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text fs-sm">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
  </div>
</div>

<!-- Center aligned -->
<div class="card text-center">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text fs-sm">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
  </div>
</div>

<!-- Right aligned -->
<div class="card text-end">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text fs-sm">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
  </div>
</div>

<!-- Tabs inside card header -->
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a href="#" class="nav-link active" data-bs-toggle="tab" role="tab">Active</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link" data-bs-toggle="tab" role="tab">Link</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link disabled" data-bs-toggle="tab" role="tab">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<!-- Alternative style tabs inside card header -->
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs-alt card-header-tabs">
      <li class="nav-item">
        <a href="#" class="nav-link active" data-bs-toggle="tab" role="tab">Active</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link" data-bs-toggle="tab" role="tab">Link</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link disabled" data-bs-toggle="tab" role="tab">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<!-- Pills inside card header -->
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a href="#" class="nav-link active">Active</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<!-- Simple list group inside card -->
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text fs-sm text-muted">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
  </div>
</div>

<!-- Actionable list group inside card -->
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text fs-sm text-muted">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="list-group list-group-flush">
    <a href="#" class="list-group-item list-group-item-action">Cras justo odio</a>
    <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
    <a href="#" class="list-group-item list-group-item-action">Vestibulum at eros</a>
  </div>
  <div class="card-body">
    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
  </div>
</div>

<!-- Primary card -->
<div class="card text-white bg-primary">
  <div class="card-header border-light">Header</div>
  <div class="card-body">
    <h5 class="card-title text-white">Primary card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Secondary card -->
<div class="card bg-secondary">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Success card -->
<div class="card text-white bg-success">
  <div class="card-header border-light">Header</div>
  <div class="card-body">
    <h5 class="card-title text-white">Success card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Danger card -->
<div class="card text-white bg-danger">
  <div class="card-header border-light">Header</div>
  <div class="card-body">
    <h5 class="card-title text-white">Danger card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Warning card -->
<div class="card text-white bg-warning">
  <div class="card-header border-light">Header</div>
  <div class="card-body">
    <h5 class="card-title text-white">Warning card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Info card -->
<div class="card text-white bg-info">
  <div class="card-header border-light">Header</div>
  <div class="card-body">
    <h5 class="card-title text-white">Info card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Dark card -->
<div class="card text-white bg-dark">
  <div class="card-header border-light">Header</div>
  <div class="card-body">
    <h5 class="card-title text-white">Dark card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Gradient card -->
<div class="card text-white bg-gradient-primary">
  <div class="card-header border-light">Header</div>
  <div class="card-body">
    <h5 class="card-title text-white">Gradient card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Primary card -->
<div class="card border-primary bg-faded-primary">
  <div class="card-header border-primary text-primary">Header</div>
  <div class="card-body">
    <h5 class="card-title text-primary">Primary card title</h5>
    <p class="card-text fs-sm text-primary">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
  </div>
</div>

<!-- Success card -->
<div class="card bg-faded-success border-success">
  <div class="card-header border-success text-success">Header</div>
  <div class="card-body">
    <h5 class="card-title text-success">Success card title</h5>
    <p class="card-text fs-sm text-success">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
  </div>
</div>

<!-- Danger card -->
<div class="card bg-faded-danger border-danger">
  <div class="card-header border-danger text-danger">Header</div>
  <div class="card-body">
    <h5 class="card-title text-danger">Danger card title</h5>
    <p class="card-text fs-sm text-danger">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
  </div>
</div>

<!-- Warning card -->
<div class="card bg-faded-warning border-warning">
  <div class="card-header border-warning text-warning">Header</div>
  <div class="card-body">
    <h5 class="card-title text-warning">Warning card title</h5>
    <p class="card-text fs-sm text-warning">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
  </div>
</div>

<!-- Info card -->
<div class="card bg-faded-info border-info">
  <div class="card-header border-info text-info">Header</div>
  <div class="card-body">
    <h5 class="card-title text-info">Info card title</h5>
    <p class="card-text fs-sm text-info">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
  </div>
</div>

<!-- Dark card -->
<div class="card bg-faded-dark border-dark">
  <div class="card-header border-dark text-dark">Header</div>
  <div class="card-body">
    <h5 class="card-title text-dark">Dark card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
  </div>
</div>

<!-- Primary card -->
<div class="card border-primary">
  <div class="card-header border-primary text-primary">Header</div>
  <div class="card-body">
    <h5 class="card-title text-primary">Primary card title</h5>
    <p class="card-text fs-sm text-primary">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
  </div>
</div>

<!-- Success card -->
<div class="card border-success">
  <div class="card-header border-success text-success">Header</div>
  <div class="card-body">
    <h5 class="card-title text-success">Success card title</h5>
    <p class="card-text fs-sm text-success">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
  </div>
</div>

<!-- Danger card -->
<div class="card border-danger">
  <div class="card-header border-danger text-danger">Header</div>
  <div class="card-body">
    <h5 class="card-title text-danger">Danger card title</h5>
    <p class="card-text fs-sm text-danger">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
  </div>
</div>

<!-- Warning card -->
<div class="card border-warning">
  <div class="card-header border-warning text-warning">Header</div>
  <div class="card-body">
    <h5 class="card-title text-warning">Warning card title</h5>
    <p class="card-text fs-sm text-warning">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
  </div>
</div>

<!-- Info card -->
<div class="card border-info">
  <div class="card-header border-info text-info">Header</div>
  <div class="card-body">
    <h5 class="card-title text-info">Info card title</h5>
    <p class="card-text fs-sm text-info">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
  </div>
</div>

<!-- Dark card -->
<div class="card border-dark">
  <div class="card-header border-dark text-dark">Header</div>
  <div class="card-body">
    <h5 class="card-title text-dark">Dark card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
  </div>
</div>