COMPONENT - INFOBOX

INFOBOX - BASIC EXAMPLES

shopping_cart
NEW ORDERS (INFOBOX-1)
125
shopping_cart
NEW ORDERS (INFOBOX-2)
125
shopping_cart
NEW ORDERS (INFOBOX-3)
125
shopping_cart
NEW ORDERS (INFOBOX-4)
125
shopping_cart
NEW ORDERS (INFOBOX-5)
125
<div class="row clearfix">
    <div class="col-md-4">
        <!-- Infobox - 1 -->
        <div class="info-box">
            <div class="icon bg-red">
                <i class="material-icons">shopping_cart</i>
            </div>
            <div class="content">
                <div class="text">NEW ORDERS (INFOBOX-1)</div>
                <div class="number">125</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <!-- Infobox - 2 -->
        <div class="info-box bg-red">
            <div class="icon">
                <i class="material-icons">shopping_cart</i>
            </div>
            <div class="content">
                <div class="text">NEW ORDERS (INFOBOX-2)</div>
                <div class="number">125</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <!-- Infobox - 3 -->
        <div class="info-box-2 bg-red">
            <div class="icon">
                <i class="material-icons">shopping_cart</i>
            </div>
            <div class="content">
                <div class="text">NEW ORDERS  (INFOBOX-3)</div>
                <div class="number">125</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <!-- Infobox - 4 -->
        <div class="info-box-3 bg-red">
            <div class="icon">
                <i class="material-icons">shopping_cart</i>
            </div>
            <div class="content">
                <div class="text">NEW ORDERS (INFOBOX-4)</div>
                <div class="number">125</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <!-- Infobox - 5 -->
        <div class="info-box-4">
            <div class="icon">
                <i class="material-icons col-red">shopping_cart</i>
            </div>
            <div class="content">
                <div class="text">NEW ORDERS (INFOBOX-5)</div>
                <div class="number">125</div>
            </div>
        </div>
    </div>
</div>

INFOBOX - HOVER ZOOM EFFECT You need to add .hover-zoom-effect class

shopping_cart
NEW ORDERS (INFOBOX-1)
125
shopping_cart
NEW ORDERS (INFOBOX-2)
125
shopping_cart
NEW ORDERS (INFOBOX-3)
125
shopping_cart
NEW ORDERS (INFOBOX-4)
125
shopping_cart
NEW ORDERS (INFOBOX-5)
125
<div class="row clearfix">
    <div class="col-md-4">
        <!-- Infobox - 1 -->
        <div class="info-box hover-zoom-effect">
            <div class="icon bg-red">
                <i class="material-icons">shopping_cart</i>
            </div>
            <div class="content">
                <div class="text">NEW ORDERS (INFOBOX-1)</div>
                <div class="number">125</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <!-- Infobox - 2 -->
        <div class="info-box bg-red hover-zoom-effect">
            <div class="icon">
                <i class="material-icons">shopping_cart</i>
            </div>
            <div class="content">
                <div class="text">NEW ORDERS (INFOBOX-2)</div>
                <div class="number">125</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <!-- Infobox - 3 -->
        <div class="info-box-2 bg-red hover-zoom-effect">
            <div class="icon">
                <i class="material-icons">shopping_cart</i>
            </div>
            <div class="content">
                <div class="text">NEW ORDERS  (INFOBOX-3)</div>
                <div class="number">125</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <!-- Infobox - 4 -->
        <div class="info-box-3 bg-red hover-zoom-effect">
            <div class="icon">
                <i class="material-icons">shopping_cart</i>
            </div>
            <div class="content">
                <div class="text">NEW ORDERS (INFOBOX-4)</div>
                <div class="number">125</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <!-- Infobox - 5 -->
        <div class="info-box-4 hover-zoom-effect">
            <div class="icon">
                <i class="material-icons col-red">shopping_cart</i>
            </div>
            <div class="content">
                <div class="text">NEW ORDERS (INFOBOX-5)</div>
                <div class="number">125</div>
            </div>
        </div>
    </div>
</div>

INFOBOX - HOVER EXPAND EFFECT You need to add .hover-expand-effect class

shopping_cart
NEW ORDERS (INFOBOX-1)
125
shopping_cart
NEW ORDERS (INFOBOX-2)
125
shopping_cart
NEW ORDERS (INFOBOX-3)
125
shopping_cart
NEW ORDERS (INFOBOX-4)
125
shopping_cart
NEW ORDERS (INFOBOX-5)
125
<div class="row clearfix">
    <div class="col-md-4">
        <!-- Infobox - 1 -->
        <div class="info-box hover-expand-effect">
            <div class="icon bg-red">
                <i class="material-icons">shopping_cart</i>
            </div>
            <div class="content">
                <div class="text">NEW ORDERS (INFOBOX-1)</div>
                <div class="number">125</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <!-- Infobox - 2 -->
        <div class="info-box bg-red hover-expand-effect">
            <div class="icon">
                <i class="material-icons">shopping_cart</i>
            </div>
            <div class="content">
                <div class="text">NEW ORDERS (INFOBOX-2)</div>
                <div class="number">125</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <!-- Infobox - 3 -->
        <div class="info-box-2 bg-red hover-expand-effect">
            <div class="icon">
                <i class="material-icons">shopping_cart</i>
            </div>
            <div class="content">
                <div class="text">NEW ORDERS  (INFOBOX-3)</div>
                <div class="number">125</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <!-- Infobox - 4 -->
        <div class="info-box-3 bg-red hover-expand-effect">
            <div class="icon">
                <i class="material-icons">shopping_cart</i>
            </div>
            <div class="content">
                <div class="text">NEW ORDERS (INFOBOX-4)</div>
                <div class="number">125</div>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <!-- Infobox - 5 -->
        <div class="info-box-4 hover-expand-effect">
            <div class="icon">
                <i class="material-icons col-red">shopping_cart</i>
            </div>
            <div class="content">
                <div class="text">NEW ORDERS (INFOBOX-5)</div>
                <div class="number">125</div>
            </div>
        </div>
    </div>
</div>