Cards

Cards are the primary content container in KMG applications.

Basic Card

Card Title

Card content goes here.

<div class="card">
  <div class="card-header pb-0">
    <h6>Card Title</h6>
  </div>
  <div class="card-body">
    <p class="text-sm text-muted">Card content goes here.</p>
  </div>
</div>
Card Title

Content

<div class="card">
  <div class="card-header pb-0">
    <h6>Card Title</h6>
  </div>
  <div class="card-body">
    <p>Content</p>
  </div>
  <div class="card-footer">
    <button class="btn btn-primary btn-sm">Save</button>
  </div>
</div>

Stat Cards

Total Users

2,300

+3.48% since last month

<div class="card">
  <div class="card-body p-3">
    <div class="row">
      <div class="col-8">
        <div class="numbers">
          <p class="text-sm mb-0 text-uppercase font-weight-bold">Total Users</p>
          <h5 class="font-weight-bolder">2,300</h5>
          <p class="mb-0">
            <span class="text-success text-sm font-weight-bolder">+3.48%</span>
            since last month
          </p>
        </div>
      </div>
      <div class="col-4 text-end">
        <div class="icon icon-shape bg-gradient-primary shadow-primary text-center rounded-circle">
          <i class="ni ni-single-02 text-lg opacity-10"></i>
        </div>
      </div>
    </div>
  </div>
</div>

Usage Guidelines

  • Cards should have mb-4 for consistent vertical spacing
  • Use card-header pb-0 for titles, card-body pt-2 for content following a header
  • Wrap all page content in cards; avoid bare text outside cards
  • Use the section-card class for hover effects on clickable cards
On this page