Widget example
Informer example
Widget example
Informer example
The Right Way - Admin Template
Simple example of widget window.
.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 middlewidget__icon_layer--right icon align right
.widget__informer — informer box.widget__informer--left left side aligment
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.
Use predefined modifier to customize widgets.
Add class widget--box to widget to set elements to vertical.
You can use widget as card component.
This example can be used as card title. All you need is add widget to card.
Basic example of informer with default features.
.informer — main widget container/wrapper..informer--icon gives you possibility to use icon.informer--icon-right set right position for icon
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.



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



Use this panel to configure template settings and layout options.