<div class="block-header">
    <h2>COMPONENT - INFOBOX</h2>
</div>

<div class="card">
    <div class="header">
        <h2>INFOBOX - BASIC EXAMPLES</h2>
    </div>
    <div class="body">
        <div class="content">
            <ul class="nav nav-tabs tab-nav-right" role="tablist">
                <li role="presentation" class="active"><a href="" data-target="#preview_1" data-toggle="tab">PREVIEW</a></li>
                <li role="presentation" class=""><a href="" data-target="#html_1" data-toggle="tab">HTML</a></li>
            </ul>
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane fade active in" id="preview_1">
                    <div class="row clearfix">
                        <div class="col-md-4">
                            <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">
                            <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">
                            <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">
                            <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">
                            <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>


                </div>
                <div role="tabpanel" class="tab-pane fade" id="html_1">
                    <pre class="brush: html">
&lt;div class="row clearfix"&gt;
    &lt;div class="col-md-4"&gt;
        &lt;!-- Infobox - 1 --&gt;
        &lt;div class="info-box"&gt;
            &lt;div class="icon bg-red"&gt;
                &lt;i class="material-icons"&gt;shopping_cart&lt;/i&gt;
            &lt;/div&gt;
            &lt;div class="content"&gt;
                &lt;div class="text"&gt;NEW ORDERS (INFOBOX-1)&lt;/div&gt;
                &lt;div class="number"&gt;125&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-4"&gt;
        &lt;!-- Infobox - 2 --&gt;
        &lt;div class="info-box bg-red"&gt;
            &lt;div class="icon"&gt;
                &lt;i class="material-icons"&gt;shopping_cart&lt;/i&gt;
            &lt;/div&gt;
            &lt;div class="content"&gt;
                &lt;div class="text"&gt;NEW ORDERS (INFOBOX-2)&lt;/div&gt;
                &lt;div class="number"&gt;125&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-4"&gt;
        &lt;!-- Infobox - 3 --&gt;
        &lt;div class="info-box-2 bg-red"&gt;
            &lt;div class="icon"&gt;
                &lt;i class="material-icons"&gt;shopping_cart&lt;/i&gt;
            &lt;/div&gt;
            &lt;div class="content"&gt;
                &lt;div class="text"&gt;NEW ORDERS  (INFOBOX-3)&lt;/div&gt;
                &lt;div class="number"&gt;125&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-4"&gt;
        &lt;!-- Infobox - 4 --&gt;
        &lt;div class="info-box-3 bg-red"&gt;
            &lt;div class="icon"&gt;
                &lt;i class="material-icons"&gt;shopping_cart&lt;/i&gt;
            &lt;/div&gt;
            &lt;div class="content"&gt;
                &lt;div class="text"&gt;NEW ORDERS (INFOBOX-4)&lt;/div&gt;
                &lt;div class="number"&gt;125&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-4"&gt;
        &lt;!-- Infobox - 5 --&gt;
        &lt;div class="info-box-4"&gt;
            &lt;div class="icon"&gt;
                &lt;i class="material-icons col-red"&gt;shopping_cart&lt;/i&gt;
            &lt;/div&gt;
            &lt;div class="content"&gt;
                &lt;div class="text"&gt;NEW ORDERS (INFOBOX-5)&lt;/div&gt;
                &lt;div class="number"&gt;125&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</pre>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="header">
        <h2>
            INFOBOX - HOVER ZOOM EFFECT
            <small>You need to add <code>.hover-zoom-effect</code> class</small>
        </h2>
    </div>
    <div class="body">
        <div class="content">
            <ul class="nav nav-tabs tab-nav-right" role="tablist">
                <li role="presentation" class="active"><a href="" data-target="#preview_2" data-toggle="tab">PREVIEW</a></li>
                <li role="presentation" class=""><a href="" data-target="#html_2" data-toggle="tab">HTML</a></li>
            </ul>
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane fade active in" id="preview_2">
                    <div class="row clearfix">
                        <div class="col-md-4">
                            <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">
                            <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">
                            <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">
                            <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">
                            <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>


                </div>
                <div role="tabpanel" class="tab-pane fade" id="html_2">
                    <pre class="brush: html">
&lt;div class="row clearfix"&gt;
    &lt;div class="col-md-4"&gt;
        &lt;!-- Infobox - 1 --&gt;
        &lt;div class="info-box hover-zoom-effect"&gt;
            &lt;div class="icon bg-red"&gt;
                &lt;i class="material-icons"&gt;shopping_cart&lt;/i&gt;
            &lt;/div&gt;
            &lt;div class="content"&gt;
                &lt;div class="text"&gt;NEW ORDERS (INFOBOX-1)&lt;/div&gt;
                &lt;div class="number"&gt;125&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-4"&gt;
        &lt;!-- Infobox - 2 --&gt;
        &lt;div class="info-box bg-red hover-zoom-effect"&gt;
            &lt;div class="icon"&gt;
                &lt;i class="material-icons"&gt;shopping_cart&lt;/i&gt;
            &lt;/div&gt;
            &lt;div class="content"&gt;
                &lt;div class="text"&gt;NEW ORDERS (INFOBOX-2)&lt;/div&gt;
                &lt;div class="number"&gt;125&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-4"&gt;
        &lt;!-- Infobox - 3 --&gt;
        &lt;div class="info-box-2 bg-red hover-zoom-effect"&gt;
            &lt;div class="icon"&gt;
                &lt;i class="material-icons"&gt;shopping_cart&lt;/i&gt;
            &lt;/div&gt;
            &lt;div class="content"&gt;
                &lt;div class="text"&gt;NEW ORDERS  (INFOBOX-3)&lt;/div&gt;
                &lt;div class="number"&gt;125&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-4"&gt;
        &lt;!-- Infobox - 4 --&gt;
        &lt;div class="info-box-3 bg-red hover-zoom-effect"&gt;
            &lt;div class="icon"&gt;
                &lt;i class="material-icons"&gt;shopping_cart&lt;/i&gt;
            &lt;/div&gt;
            &lt;div class="content"&gt;
                &lt;div class="text"&gt;NEW ORDERS (INFOBOX-4)&lt;/div&gt;
                &lt;div class="number"&gt;125&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-4"&gt;
        &lt;!-- Infobox - 5 --&gt;
        &lt;div class="info-box-4 hover-zoom-effect"&gt;
            &lt;div class="icon"&gt;
                &lt;i class="material-icons col-red"&gt;shopping_cart&lt;/i&gt;
            &lt;/div&gt;
            &lt;div class="content"&gt;
                &lt;div class="text"&gt;NEW ORDERS (INFOBOX-5)&lt;/div&gt;
                &lt;div class="number"&gt;125&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</pre>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="header">
        <h2>
            INFOBOX - HOVER EXPAND EFFECT
            <small>You need to add <code>.hover-expand-effect</code> class</small>
        </h2>
    </div>
    <div class="body">
        <div class="content">
            <ul class="nav nav-tabs tab-nav-right" role="tablist">
                <li role="presentation" class="active"><a href="" data-target="#preview_3" data-toggle="tab">PREVIEW</a></li>
                <li role="presentation" class=""><a href="" data-target="#html_3" data-toggle="tab">HTML</a></li>
            </ul>
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane fade active in" id="preview_3">
                    <div class="row clearfix">
                        <div class="col-md-4">
                            <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">
                            <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">
                            <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">
                            <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">
                            <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>


                </div>
                <div role="tabpanel" class="tab-pane fade" id="html_3">
                    <pre class="brush: html">
&lt;div class="row clearfix"&gt;
    &lt;div class="col-md-4"&gt;
        &lt;!-- Infobox - 1 --&gt;
        &lt;div class="info-box hover-expand-effect"&gt;
            &lt;div class="icon bg-red"&gt;
                &lt;i class="material-icons"&gt;shopping_cart&lt;/i&gt;
            &lt;/div&gt;
            &lt;div class="content"&gt;
                &lt;div class="text"&gt;NEW ORDERS (INFOBOX-1)&lt;/div&gt;
                &lt;div class="number"&gt;125&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-4"&gt;
        &lt;!-- Infobox - 2 --&gt;
        &lt;div class="info-box bg-red hover-expand-effect"&gt;
            &lt;div class="icon"&gt;
                &lt;i class="material-icons"&gt;shopping_cart&lt;/i&gt;
            &lt;/div&gt;
            &lt;div class="content"&gt;
                &lt;div class="text"&gt;NEW ORDERS (INFOBOX-2)&lt;/div&gt;
                &lt;div class="number"&gt;125&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-4"&gt;
        &lt;!-- Infobox - 3 --&gt;
        &lt;div class="info-box-2 bg-red hover-expand-effect"&gt;
            &lt;div class="icon"&gt;
                &lt;i class="material-icons"&gt;shopping_cart&lt;/i&gt;
            &lt;/div&gt;
            &lt;div class="content"&gt;
                &lt;div class="text"&gt;NEW ORDERS  (INFOBOX-3)&lt;/div&gt;
                &lt;div class="number"&gt;125&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-4"&gt;
        &lt;!-- Infobox - 4 --&gt;
        &lt;div class="info-box-3 bg-red hover-expand-effect"&gt;
            &lt;div class="icon"&gt;
                &lt;i class="material-icons"&gt;shopping_cart&lt;/i&gt;
            &lt;/div&gt;
            &lt;div class="content"&gt;
                &lt;div class="text"&gt;NEW ORDERS (INFOBOX-4)&lt;/div&gt;
                &lt;div class="number"&gt;125&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-4"&gt;
        &lt;!-- Infobox - 5 --&gt;
        &lt;div class="info-box-4 hover-expand-effect"&gt;
            &lt;div class="icon"&gt;
                &lt;i class="material-icons col-red"&gt;shopping_cart&lt;/i&gt;
            &lt;/div&gt;
            &lt;div class="content"&gt;
                &lt;div class="text"&gt;NEW ORDERS (INFOBOX-5)&lt;/div&gt;
                &lt;div class="number"&gt;125&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</pre>
                </div>
            </div>
        </div>
    </div>
</div>