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.