Box widgets

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

150

New orders

More info

53 %

Bounce Rate

More info

44

User Registrations

More info

65

Unique Visitors

More info

 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>