## 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>