---
layout: page
title: 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
{: .text-bold .text-dark .mt-5}
```html
```
{: .max-height-300}
##### Card Variants
{: .text-bold .text-dark .mt-5}
You can change the style of the card by adding any of the contextual classes.
###### Default
{: .text-bold .text-dark}
```html
...
...
...
...
...
...
...
...
```
###### Outline
{: .text-bold .text-dark}
```html
...
...
...
...
...
...
...
```
###### Background Color
{: .text-bold .text-dark}
```html
...
...
...
...
...
...
...
```
###### Gradient Background Color
{: .text-bold .text-dark}
```html
...
...
...
...
...
...
...
```
##### Card Tools
{: .text-bold .text-dark .mt-5}
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.
```html
```
{: .max-height-300}
##### Loading Style
{: .text-bold .text-dark .mt-5}
To simulate a loading state, simply place this code before the `.card` closing tag.
```html
```
You can also use a dark loading style with adding `.dark` to `.overlay` like this code.
```html
```