mirror of https://github.com/ColorlibHQ/AdminLTE
10 KiB
10 KiB
| layout | title |
|---|---|
| page | Boxes Components |
There are two types of boxes, info boxes & small boxes. Both boxes are used to display statistical snippets.
Info Box
{: .text-bold .text-dark .mt-4}
Messages
1,410
Bookmarks
410
Uploads
13,648
```html
```
{: .col-md-4 .col-sm-6 .col-12}
```html
```
{: .col-md-4 .col-sm-6 .col-12}
```html
```
{: .col-md-4 .col-sm-6 .col-12}
Messages
1,410
Bookmarks
410
Uploads
13,648
Info Box with Progress Bar
{: .text-bold .text-dark .mt-4}
Bookmarks
41,410
70% Increase in 30 Days
Likes
41,410
70% Increase in 30 Days
Events
41,410
70% Increase in 30 Days
```html
```
{: .col-md-4 .col-sm-6 .col-12 .max-height-300}
```html
```
{: .col-md-4 .col-sm-6 .col-12 .max-height-300}
```html
```
{: .col-md-4 .col-sm-6 .col-12 .max-height-300}
Bookmarks
41,410
70% Increase in 30 Days
Likes
41,410
70% Increase in 30 Days
Events
41,410
70% Increase in 30 Days
Small Box
{: .text-bold .text-dark .mt-4}
```html
```
{: .col-md-4 .col-sm-6 .col-12 .max-height-300}
```html
```
{: .col-md-4 .col-sm-6 .col-12 .max-height-300}
Loading Style
{: .text-bold .text-dark .mt-5}
To simulate a loading state, simply place this code before the .info-box / .small-box closing tag.
Tip!
We recommend
.fa-2xfor Info Boxes and.fa-3xfor Small Boxes to get a nicely sized loading icon,
like in this documentation. {: .quote-info}
<div class="overlay">
<i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>
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>