Size

Standardized width and height presets to maintain vertical rhythm in card grids.

Extra small

Card title

Example text

<div class="card card-1">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item"><a class="nav-link active" href="#">Item 1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
    </ul>
  </div>
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Example text</p>
  </div>
  <div class="card-footer">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item"><a class="nav-link active" href="#">Item 1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
    </ul>
  </div>
</div>

Class list

Breakpoint Class
Extra small .card-1
Small .card-sm-1
Medium .card-md-1
Large .card-lg-1
Extra large .card-xl-1
2 Extra large .card-xxl-1
3 Extra large .card-3xl-1
4 Extra large .card-4xl-1
5 Extra large .card-5xl-1

Small

Card title

Example text

<div class="card card-2">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item"><a class="nav-link active" href="#">Item 1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
    </ul>
  </div>
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Example text</p>
  </div>
  <div class="card-footer">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item"><a class="nav-link active" href="#">Item 1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
    </ul>
  </div>
</div>

Class list

Breakpoint Class
Extra small .card-2
Small .card-sm-2
Medium .card-md-2
Large .card-lg-2
Extra large .card-xl-2
2 Extra large .card-xxl-2
3 Extra large .card-3xl-2
4 Extra large .card-4xl-2
5 Extra large .card-5xl-2

Medium

Card title

Example text

<div class="card card-3">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item"><a class="nav-link active" href="#">Item 1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
    </ul>
  </div>
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Example text</p>
  </div>
  <div class="card-footer">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item"><a class="nav-link active" href="#">Item 1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
    </ul>
  </div>
</div>

Class list

Breakpoint Class
Extra small .card-3
Small .card-sm-3
Medium .card-md-3
Large .card-lg-3
Extra large .card-xl-3
2 Extra large .card-xxl-3
3 Extra large .card-3xl-3
4 Extra large .card-4xl-3
5 Extra large .card-5xl-3

Large

Card title

Example text

<div class="card card-4">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item"><a class="nav-link active" href="#">Item 1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
    </ul>
  </div>
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Example text</p>
  </div>
  <div class="card-footer">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item"><a class="nav-link active" href="#">Item 1</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
    </ul>
  </div>
</div>

Class list

Breakpoint Class
Extra small .card-4
Small .card-sm-4
Medium .card-md-4
Large .card-lg-4
Extra large .card-xl-4
2 Extra large .card-xxl-4
3 Extra large .card-3xl-4
4 Extra large .card-4xl-4
5 Extra large .card-5xl-4