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: 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}
```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}
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
Bookmarks
41,410
70% Increase in 30 Days
```
{: .col-md-4 .col-sm-6 .col-12 .max-height-300}
```html
Likes
41,410
70% Increase in 30 Days
```
{: .col-md-4 .col-sm-6 .col-12 .max-height-300}
```html
Events
41,410
70% Increase in 30 Days
```
{: .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}
like in this documentation.
{: .quote-info}
```html
```
Bookmarks
41,410
70% Increase in 30 Days
You can also use a dark loading style with adding `.dark` to `.overlay` like this code.
```html
```
Bookmarks
41,410
70% Increase in 30 Days