PNG
IHDR ; IDATxܻn0K
)(pA 7LeG{ §㻢| ذaÆ
6lذaÆ
6lذaÆ
6lom$^yذag5 bÆ
6lذaÆ
6lذa{
6lذaÆ
` }HFkm,mӪôô! x|'ܢ˟;E:9&ᶒ}{v]n&6
h_tڠ͵-ҫZ;Z$.Pkž)!o>}leQfJTu іچ\X=8Rن4`Vwl>nG^is"ms$ui?wbs[m6K4O .4%/ bC%t Mז -lG6mrz2s%9s@-k9=)kB5\+͂Zsٲ Rn~GRC wIcIn7jJhۛNCS|j08yiHKֶۛkɈ+;Sz L /F *\Ԕ#"5m2[S =gnaPeғL
lذaÆ
6l^ḵaÆ
6lذaÆ
6lذa;
_ذaÆ
6lذaÆ
6lذaÆ
R IENDB`
---
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-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
```