Widget example

Default widget
Inverted example
Unlimited features

Informer example

5,355
Recent visitors

Widgets

The Right Way - Admin Template

System defence
Activated
31 attempts
System logs
Archived information
4 crytical
Your balance
Total income amout
$351.11

Default widget

Simple example of widget window.

Basic widget structure:
Some containers have their own modifiers:

.widget — main widget container/wrapper.
.widget--items-middle makes all items vertical middle

.widget__icon_layer — background image wrapper.
widget__icon_layer--middle icon align middle
widget__icon_layer--right icon align right

.widget__informer — informer box.
widget__informer--left left side aligment

Working proccesses
Recent opened
6 proccesses
Users activity
Unique visitors today
2,355 visits
Opened requests
Todays summary amount
$1,723.50

Inverted with background

Use predefined functions to customize widgets.

Add class invert to widget to invert colors to dark version.

Use classes bg-gradient-* to change widget default background color.

Widget box modifier

Use predefined modifier to customize widgets.

Add class widget--box to widget to set elements to vertical.

Long title inside widget
Secondary text under title goes right here

As card component

You can use widget as card component.

This example can be used as card title. All you need is add widget to card.

3,155
User visits
45.3%
Server load
1,259
Recent news
351
Income orders

Default informer

Basic example of informer with default features.

Basic informer structure:
Some containers have their own modifiers:

.informer — main widget container/wrapper.
.informer--icon gives you possibility to use icon
.informer--icon-right set right position for icon

3,155
User visits
45.3%
Server load
1,259
Recent news
351
Income orders

Inverted with background

Use predefined modificators to change your informer.

Add class invert to informer to invert colors to dark version.

Use classes bg-gradient-* to change informer default background color.

4941
53**
****
**21
Card holder
John Doe
Expiration
09/20
4941
53**
****
**21
Card holder
John Doe
Expiration
09/20
johndoe@momain.com
Added on
01/12/2018

Credit cards

Example of credit card widgets

credit-card simple container for credit card example. Use special class credit-card__number for credit card number.

4941
53**
****
**21
Card holder
John Doe
Expiration
09/20
4941
53**
****
**21
Card holder
John Doe
Expiration
09/20
johndoe@momain.com
Added on
01/12/2018
Template settings
Information

Use this panel to configure template settings and layout options.

Layout option
Backgrounds
Header options
Container
Navigation options
Sidepanel options
Content options