# THE RIGHT WAY #RW

Notifications

List of latest events

  • Tracey Newman
    Tracey Newman commented on your Awesome article, 5 min ago
  • John Doe
    John Doe added new article Progs for begginers, 13 min ago

  • Important memory issue. Memory loading 99% - 2021 of 2048

  • Jonathan Foster
    Jonathan Foster edited product JST Smartphone, 30 min ago
  • File uploading proccess 25%.

Widget example

Default widget
Inverted example
Unlimited features

Informer example

5,355
Recent visitors

Widgets

The Right Way - Admin Template

$24 Get template now $24 Buy
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.

Settings
Account control
Users
Your account
Analytics
Recent statistics
System
Configuration
Exit
Logoff account

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