--- 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}
Messages 1,410
Bookmarks 410
Uploads 13,648
```html
Messages 1,410
``` {: .col-md-4 .col-sm-6 .col-12} ```html
Bookmarks 410
``` {: .col-md-4 .col-sm-6 .col-12} ```html
Uploads 13,648
``` {: .col-md-4 .col-sm-6 .col-12}
> ##### Note! > To wrap the text in to a new line add to the info-box-text the class text-wrap. > To truncate the text with ... add to the info-box-content the class text-truncate. (Here you should add a tooltip to display the whole pharse) {: .quote-danger} ##### 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
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}
##### Small Box {: .text-bold .text-dark .mt-4}

150

New Orders

More info

44

User Registrations

More info
```html

150

New Orders

More info
``` {: .col-md-4 .col-sm-6 .col-12 .max-height-300} ```html

44

User Registrations

More info
``` {: .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-2x` for Info Boxes and `.fa-3x` for Small Boxes to get a nicely sized loading icon,
like in this documentation. {: .quote-info} ```html
```
Messages 1,410
Bookmarks 41,410
70% Increase in 30 Days

150

New Orders

More info
You can also use a dark loading style with adding `.dark` to `.overlay` like this code. ```html
```
Messages 1,410
Bookmarks 41,410
70% Increase in 30 Days

150

New Orders

More info