This page presents different box widgets. It is a nice solution for backend dashboard. Why? It's informatively, simply and beautiful. Use it in your applications with pleasure.
InfoBox widget
Messages1,410
Bookmarks410
Uploads13,648
Likes93,139
Code
<div class="row"> <div class="col-lg-3 col-xs-6"> <?= yiister\adminlte\widgets\InfoBox::widget( [ "color" => \yiister\adminlte\components\AdminLTE::BG_AQUA, "icon" => "envelope-o", "text" => "Messages", "number" => "1,410", ] ) ?> </div> <div class="col-lg-3 col-xs-6"> <?= yiister\adminlte\widgets\InfoBox::widget( [ "color" => \yiister\adminlte\components\AdminLTE::BG_GREEN, "icon" => "flag-o", "text" => "Bookmarks", "number" => "410", ] ) ?> </div> <div class="col-lg-3 col-xs-6"> <?= yiister\adminlte\widgets\InfoBox::widget( [ "color" => \yiister\adminlte\components\AdminLTE::BG_YELLOW, "icon" => "files-o", "text" => "Uploads", "number" => "13,648", ] ) ?> </div> <div class="col-lg-3 col-xs-6"> <?= yiister\adminlte\widgets\InfoBox::widget( [ "color" => \yiister\adminlte\components\AdminLTE::BG_RED, "icon" => "star-o", "text" => "Likes", "number" => "93,139", ] ) ?> </div> </div>
Filled InfoBox widget with progress bar
Bookmarks41,410
70% Increase in 30 Days
Likes41,410
70% Increase in 30 Days
Events41,410
70% Increase in 30 Days
Comments41,410
70% Increase in 30 Days
Code
<div class="row"> <div class="col-lg-3 col-xs-6"> <?= yiister\adminlte\widgets\InfoBox::widget( [ "color" => \yiister\adminlte\components\AdminLTE::BG_AQUA, "icon" => "bookmark-o", "text" => "Bookmarks", "number" => "41,410", "filled" => true, "progress" => 70, "progressDescription" => "70% Increase in 30 Days", ] ) ?> </div> <div class="col-lg-3 col-xs-6"> <?= yiister\adminlte\widgets\InfoBox::widget( [ "color" => \yiister\adminlte\components\AdminLTE::BG_GREEN, "icon" => "thumbs-o-up", "text" => "Likes", "number" => "41,410", "filled" => true, "progress" => 70, "progressDescription" => "70% Increase in 30 Days", ] ) ?> </div> <div class="col-lg-3 col-xs-6"> <?= yiister\adminlte\widgets\InfoBox::widget( [ "color" => \yiister\adminlte\components\AdminLTE::BG_YELLOW, "icon" => "calendar", "text" => "Events", "number" => "41,410", "filled" => true, "progress" => 70, "progressDescription" => "70% Increase in 30 Days", ] ) ?> </div> <div class="col-lg-3 col-xs-6"> <?= yiister\adminlte\widgets\InfoBox::widget( [ "color" => \yiister\adminlte\components\AdminLTE::BG_RED, "icon" => "comments-o", "text" => "Comments", "number" => "41,410", "filled" => true, "progress" => 70, "progressDescription" => "70% Increase in 30 Days", ] ) ?> </div> </div>
SmallBox widget
Code
<div class="row"> <div class="col-lg-3 col-xs-6"> <?= \yiister\adminlte\widgets\SmallBox::widget( [ "color" => \yiister\adminlte\components\AdminLTE::BG_AQUA, "header" => "150", "icon" => "shopping-cart", "text" => "New orders", ] ) ?> </div> <div class="col-lg-3 col-xs-6"> <?= \yiister\adminlte\widgets\SmallBox::widget( [ "color" => \yiister\adminlte\components\AdminLTE::BG_GREEN, "header" => "53 <sup>%</sup>", "icon" => "bar-chart", "text" => "Bounce Rate", ] ) ?> </div> <div class="col-lg-3 col-xs-6"> <?= \yiister\adminlte\widgets\SmallBox::widget( [ "color" => \yiister\adminlte\components\AdminLTE::BG_YELLOW, "header" => "44", "icon" => "user", "text" => "User Registrations", ] ) ?> </div> <div class="col-lg-3 col-xs-6"> <?= \yiister\adminlte\widgets\SmallBox::widget( [ "color" => \yiister\adminlte\components\AdminLTE::BG_RED, "header" => "65", "icon" => "group", "text" => "Unique Visitors", ] ) ?> </div> </div>
Box widget
Expandable
The body of the box
Removable
The body of the box
Collapsable
The body of the box
With icon
The body of the box
Code
<div class="row"> <div class="col-lg-3 col-xs-6"> <?php \yiister\adminlte\widgets\Box::begin( [ "header" => "Expandable", "expandable" => true, ] ) ?> <p>The body of the box</p> <?php \yiister\adminlte\widgets\Box::end() ?> </div> <div class="col-lg-3 col-xs-6"> <?php \yiister\adminlte\widgets\Box::begin( [ "header" => "Removable", "type" => \yiister\adminlte\widgets\Box::TYPE_SUCCESS, "removable" => true, ] ) ?> <p>The body of the box</p> <?php \yiister\adminlte\widgets\Box::end() ?> </div> <div class="col-lg-3 col-xs-6"> <?php \yiister\adminlte\widgets\Box::begin( [ "header" => "Collapsable", "type" => \yiister\adminlte\widgets\Box::TYPE_DANGER, "collapsable" => true, ] ) ?> <p>The body of the box</p> <?php \yiister\adminlte\widgets\Box::end() ?> </div> <div class="col-lg-3 col-xs-6"> <?php \yiister\adminlte\widgets\Box::begin( [ "header" => "With icon", "icon" => "image", "type" => \yiister\adminlte\widgets\Box::TYPE_WARNING, ] ) ?> <p>The body of the box</p> <?php \yiister\adminlte\widgets\Box::end() ?> </div> </div>
Filled Box widget
Expandable
The body of the box
Removable
The body of the box
Collapsable
The body of the box
With icon
The body of the box
Code
<div class="row"> <div class="col-lg-3 col-xs-6"> <?php \yiister\adminlte\widgets\Box::begin( [ "header" => "Expandable", "expandable" => true, "filled" => true, ] ) ?> <p>The body of the box</p> <?php \yiister\adminlte\widgets\Box::end() ?> </div> <div class="col-lg-3 col-xs-6"> <?php \yiister\adminlte\widgets\Box::begin( [ "header" => "Removable", "type" => \yiister\adminlte\widgets\Box::TYPE_SUCCESS, "removable" => true, "filled" => true, ] ) ?> <p>The body of the box</p> <?php \yiister\adminlte\widgets\Box::end() ?> </div> <div class="col-lg-3 col-xs-6"> <?php \yiister\adminlte\widgets\Box::begin( [ "header" => "Collapsable", "type" => \yiister\adminlte\widgets\Box::TYPE_DANGER, "collapsable" => true, "filled" => true, ] ) ?> <p>The body of the box</p> <?php \yiister\adminlte\widgets\Box::end() ?> </div> <div class="col-lg-3 col-xs-6"> <?php \yiister\adminlte\widgets\Box::begin( [ "header" => "With icon", "icon" => "image", "type" => \yiister\adminlte\widgets\Box::TYPE_WARNING, "filled" => true, ] ) ?> <p>The body of the box</p> <?php \yiister\adminlte\widgets\Box::end() ?> </div> </div>