icon-cookie
The website uses cookies to optimize your user experience. Using this website grants us the permission to collect certain information essential to the provision of our services to you, but you may change the cookie settings within your browser any time you wish. Learn more
I agree
blank_error__heading
blank_error__body
Text direction?

Cards Component

The card component is the most widely used component through out this template. You can use it for anything from displaying charts to just blocks of text. It comes in many different styles that we will explore below.

Default Card Markup

Default Card Example

Label
The body of the card
The footer of the card
<div class="card">
  <div class="card-header">
    <h3 class="card-title">Default Card Example</h3>
    <div class="card-tools">
      <!-- Buttons, labels, and many other things can be placed here! -->
      <!-- Here is a label for example -->
      <span class="badge badge-primary">Label</span>
    </div>
    <!-- /.card-tools -->
  </div>
  <!-- /.card-header -->
  <div class="card-body">
    The body of the card
  </div>
  <!-- /.card-body -->
  <div class="card-footer">
    The footer of the card
  </div>
  <!-- /.card-footer -->
</div>
<!-- /.card -->
Card Variants

You can change the style of the card by adding any of the contextual classes.

Default

Default Card Example

The body of the card
The footer of the card

Primary Card Example

The body of the card
The footer of the card

Secondary Card Example

The body of the card
The footer of the card

Success Card Example

The body of the card
The footer of the card

Info Card Example

The body of the card
The footer of the card

Warning Card Example

The body of the card
The footer of the card

Danger Card Example

The body of the card
The footer of the card

Dark Card Example

The body of the card
The footer of the card
<div class="card">...</div>
<div class="card card-primary">...</div>
<div class="card card-secondary">...</div>
<div class="card card-success">...</div>
<div class="card card-info">...</div>
<div class="card card-warning">...</div>
<div class="card card-danger">...</div>
<div class="card card-dark">...</div>
Outline

Primary Card Example

The body of the card
The footer of the card

Secondary Card Example

The body of the card
The footer of the card

Success Card Example

The body of the card
The footer of the card

Info Card Example

The body of the card
The footer of the card

Warning Card Example

The body of the card
The footer of the card

Danger Card Example

The body of the card
The footer of the card

Dark Card Example

The body of the card
The footer of the card
<div class="card card-outline card-primary">...</div>
<div class="card card-outline card-secondary">...</div>
<div class="card card-outline card-success">...</div>
<div class="card card-outline card-info">...</div>
<div class="card card-outline card-warning">...</div>
<div class="card card-outline card-danger">...</div>
<div class="card card-outline card-dark">...</div>
Background Color

Primary Card Example

The body of the card
The footer of the card

Secondary Card Example

The body of the card
The footer of the card

Success Card Example

The body of the card
The footer of the card

Info Card Example

The body of the card
The footer of the card

Warning Card Example

The body of the card
The footer of the card

Danger Card Example

The body of the card
The footer of the card

Dark Card Example

The body of the card
The footer of the card
<div class="card bg-primary">...</div>
<div class="card bg-secondary">...</div>
<div class="card bg-success">...</div>
<div class="card bg-info">...</div>
<div class="card bg-warning">...</div>
<div class="card bg-danger">...</div>
<div class="card bg-dark">...</div>
Gradient Background Color

Primary Card Example

The body of the card
The footer of the card

Secondary Card Example

The body of the card
The footer of the card

Success Card Example

The body of the card
The footer of the card

Info Card Example

The body of the card
The footer of the card

Warning Card Example

The body of the card
The footer of the card

Danger Card Example

The body of the card
The footer of the card

Dark Card Example

The body of the card
The footer of the card
<div class="card bg-gradient-primary">...</div>
<div class="card bg-gradient-secondary">...</div>
<div class="card bg-gradient-success">...</div>
<div class="card bg-gradient-info">...</div>
<div class="card bg-gradient-warning">...</div>
<div class="card bg-gradient-danger">...</div>
<div class="card bg-gradient-dark">...</div>
Card Tools

Cards can contain tools to deploy a specific event or provide simple info. The following examples makes use of multiple AdminLTE components within the header of the card.

AdminLTE data-card-widget attribute provides cards with the ability to collapse or be removed. The buttons are placed in the card-tools which is placed in the card-header.

<div class="card card-primary">
  <div class="card-header">
    <h3 class="card-title">Card Tools</h3>

    <div class="card-tools">
      <!-- This will cause the card to maximize when clicked -->
      <button type="button" class="btn btn-tool" data-card-widget="maximize"><i class="fas fa-expand"></i></button>
      <!-- This will cause the card to collapse when clicked -->
      <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
      <!-- This will cause the card to be removed when clicked -->
      <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button>
    </div>
    <!-- /.card-tools -->
  </div>
  <!-- /.card-header -->
  <div class="card-body">
    The body of the card
  </div>
  <!-- /.card-body -->
</div>
<!-- /.card -->
Loading Style

To simulate a loading state, simply place this code before the .card closing tag.

<div class="overlay">
  <i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>

Loading state

The body of the card

Loading state

The body of the card

Loading state

The body of the card

Loading state

The body of the card

You can also use a dark loading style with adding .dark to .overlay like this code.

<div class="overlay dark">
  <i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>

Loading state (dark)

The body of the card

Loading state (dark)

The body of the card

Loading state (dark)

The body of the card

Loading state (dark)

The body of the card
Measure
Measure
Related Notes
Get a free MyMarkup account to save this article and view it later on any device.
Create account

End User License Agreement

Summary | 7 Annotations
The card component is the most widely used component through out this template
2020/06/06 08:25
contextual classes
2020/06/06 08:27
Outline
2020/06/06 08:28
Background Color
2020/06/06 08:28
Gradient Background Color
2020/06/06 08:28
Cards can contain tools to deploy a specific event or provide simple info
2020/06/06 08:31
data-card-widget attribute provides cards with the ability to collapse or be removed
2020/06/06 08:35