include "include/header_production.html"

Information Boxes Information boxes can be used to build dashboards showing important informations like charts, growth numbers, trends etc.

include "include/breadcrumb_right.html"
include "include/theming.html"

Basic

You can style the information boxes using the included core helper classes and the response messages backgrounds like we did in the examples below.

Monthly analytics 65.4 +0.5
New visitors 21.16 -5.4
Unpaid orders 74.83 =3,14
Overdue orders 92.12 +0.5
Current growth 765 -2.1
Exchange rate 43.79 +0.9
Exchange rate 43.79 +0.9
Exchange rate 43.79 +0.9
Get source

                
Monthly analytics 65.4 +0.5
New visitors 21.16 -5.4
Unpaid orders 74.83 =3,14
Overdue orders 92.12 +0.5
Current growth 765 -2.1
Exchange rate 43.79 +0.9
Exchange rate 43.79 +0.9
Exchange rate 43.79 +0.9

Icons

For better user experience you can add a big fancy icon to the left of the information boxes. You need to add the icon-wrapper class to the .info-box element.

Exchange rate 43.79 +0.9
New visitors 21.16 -5.4
Overdue orders 92.12 +0.5
Monthly analytics 65.4 +0.5
Get source

                
Exchange rate 43.79 +0.9
New visitors 21.16 -5.4
Overdue orders 92.12 +0.5
Monthly analytics 65.4 +0.5

Charts

Information boxes can also contain charts instead of icons.

To view the available charts options & configurations you can visit the Supina Admin Sparklines Charts documentation page.

Exchange rate 43.79 +0.9
New visitors 21.16 -5.4
Overdue orders 92.12 +0.5
Monthly analytics 65.4 +0.5
Get source

                
Exchange rate 43.79 +0.9
New visitors 21.16 -5.4
Overdue orders 92.12 +0.5
Monthly analytics 65.4 +0.5

Alternate Charts

The following information boxes have smaller charts and different title position.

New visitors

32.000 +0.5

Overdue orders

2,4,6,-4,-2,0,5,7,10,-4,-10,0,0,2,4,-5,4
32.000 +0.5

Example title

Loading...
32.000 +0.5

Example title

1,2,4,6,9,4,4,3,1,7,2,4,6,9,4,4,3,1,7,5,9,10
32.000 +0.5
Get source

                

New visitors

32.000 +0.5

Overdue orders

2,4,6,-4,-2,0,5,7,10,-4,-10,0,0,2,4,-5,4
32.000 +0.5

Example title

Loading...
32.000 +0.5

Example title

1,2,4,6,9,4,4,3,1,7,2,4,6,9,4,4,3,1,7,5,9,10
32.000 +0.5

Alternate Charts 2

This example was created without using any aditional code.

5,6,7,5,9,8,6,3,2,1,2,4,2,2,4,6,7
Current growth 765 -8.1
5,6,7,9,9,5,6,7,9,9,5,3,2,2,4,6,7
New visitors 21.8 +5.2
5,6,7,9,9,8,6,3,2,1,2,4,4,6,7
Overdue orders 92.12 +0.5
7,3,6,3,8,4,1,5,8,6,3,2,5,6
Monthly analytics 65.4 +2.1
Get source

                
5,6,7,5,9,8,6,3,2,1,2,4,2,2,4,6,7
Current growth 765 -8.1
5,6,7,9,9,5,6,7,9,9,5,3,2,2,4,6,7
New visitors 21.8 +5.2
5,6,7,9,9,8,6,3,2,1,2,4,4,6,7
Overdue orders 92.12 +0.5
7,3,6,3,8,4,1,5,8,6,3,2,5,6
Monthly analytics 65.4 +2.1
include "include/footer.html"