TaskA/public/backend/docs/components/boxes.md

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

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}

<div class="overlay">
  <i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>

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.

<div class="overlay dark">
  <i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>

Messages 1,410

Bookmarks 41,410

70% Increase in 30 Days

150

New Orders

More info