TaskA/public/backend/docs/components/boxes.md
2024-06-16 13:56:32 +05:45

11 KiB
Executable File

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