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

Basic

By default the information boxes have a 3px top border that can be styled using the border-color core helper class (eg. border-red, border-green, border-orange, etc). You can use the remove-border core helper class to remove it.

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

Custom backgrounds

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

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

Charts

Information boxes can also contain charts instead of icons.

To view the available charts options & configurations you can visit the AgileUI 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

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