Card ​

Bootstrap

Bootstrap card. Layout patterns below; usage → Rules.

Default ​

Borderless card on page surface (bg-body in previews). Metric / summary tiles.

Open tasks

18

-3 vs. last week

View details

€ 482K

+12% vs. last month

html
<div class="card">
  <div class="card-body">
    <p class="small text-uppercase fw-bold text-body-tertiary mb-2">
      <i class="bi bi-check2-square me-1"></i>
      Open tasks
    </p>
    <p class="card-title h1 mb-2">18</p>
    <p class="small mb-0">
      <span class="text-danger fw-semibold">
        <i class="bi bi-arrow-down"></i>
        -3
      </span>
      <span class="text-muted">vs. last week</span>
    </p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <p class="small text-uppercase fw-bold text-body-tertiary mb-2">
      <i class="bi bi-graph-up me-1"></i>
      View details
    </p>
    <p class="card-title h1 mb-2">€ 482K</p>
    <p class="small mb-0">
      <span class="text-success fw-semibold">
        <i class="bi bi-arrow-up"></i>
        +12%
      </span>
      <span class="text-muted">vs. last month</span>
    </p>
  </div>
</div>

Bordered ​

Sqrl custom

card-bordered when the card sits on paper/white or another card.

Van den Berg Logistics

Account · 12 contacts

Active
html
<div class="card card-bordered">
  <div class="card-body d-flex justify-content-between align-items-start">
    <div>
      <h3 class="card-title h4 mb-1">Van den Berg Logistics</h3>
      <p class="card-text text-muted small mb-0">Account · 12 contacts</p>
    </div>
    <span class="badge badge-dotted text-bg-accent-teal">Active</span>
  </div>
</div>

card-header: identity (avatar, title). Facts grid in card-body.

AP

Anouk Peters

Sales Director, Sqrl B.V.

Email

anouk@sqrl.nl

Phone

+31 6 1234 5678

Deals

3

Value

€ 84K

html
<div class="card">
  <div class="card-header d-flex align-items-center gap-3">
    <span class="avatar avatar-lg avatar-square text-bg-info">AP</span>
    <div>
      <h3 class="card-title h4">Anouk Peters</h3>
      <p class="card-text text-muted small mb-0">Sales Director, Sqrl B.V.</p>
    </div>
  </div>
  <div class="card-body">
    <div class="row g-3">
      <div class="col-6">
        <p class="small text-uppercase fw-bold text-body-tertiary mb-1">
          Email
        </p>
        <p class="mb-0">anouk@sqrl.nl</p>
      </div>
      <div class="col-6">
        <p class="small text-uppercase fw-bold text-body-tertiary mb-1">
          Phone
        </p>
        <p class="mb-0">+31 6 1234 5678</p>
      </div>
      <div class="col-6">
        <p class="small text-uppercase fw-bold text-body-tertiary mb-1">
          Deals
        </p>
        <p class="mb-0 font-monospace">3</p>
      </div>
      <div class="col-6">
        <p class="small text-uppercase fw-bold text-body-tertiary mb-1">
          Value
        </p>
        <p class="mb-0 font-monospace">€ 84K</p>
      </div>
    </div>
  </div>
</div>

card-footer: actions ( btn-sm ).

Van den Berg Logistics

12 contacts

html
<div class="card">
  <div class="card-body">
    <h3 class="card-title h4 mb-1">Van den Berg Logistics</h3>
    <p class="card-text text-muted small mb-0">12 contacts</p>
  </div>
  <div class="card-footer d-flex justify-content-end gap-2">
    <button type="button" class="btn btn-sm btn-secondary">Cancel</button>
    <button type="button" class="btn btn-sm btn-primary">Save changes</button>
  </div>
</div>

Rules ​

When to use ​

Group related content: metrics, record summary, flow step nodes, optional shell for dense lists (not required for empty state).

Structure ​

card-header / card-body / card-footer are siblings — never nest header/footer inside body.

Surface ​

Default borderless on bg-body. card-bordered on low-contrast backgrounds.