Icon Boxes | Ecada - Responsive Multipurpose Template

Top icon box

Sed qualisque ullamcorper ut. Graecis expetendis omittantur cu his facer recusabo.

Learn more +

Top icon box

Sed qualisque ullamcorper ut. Graecis expetendis omittantur cu his facer recusabo.

Learn more +

Top icon box

Sed qualisque ullamcorper ut. Graecis expetendis omittantur cu his facer recusabo.

Learn more +

Top icon box

Sed qualisque ullamcorper ut. Graecis expetendis omittantur cu his facer recusabo.

Learn more +

Shortcode

<div class="icon-box icon-top">
    <div class="icon-box-contain">
        <i class="fa fa-bullhorn"></i>
        <h5>Top icon box</h5>
        <p>
            [...]
        </p>
        <p><a class="btn-e btn-e-default btn-bordered btn-sm" href="javascript:void(0);">Learn more +</a></p>
    </div>
</div>
<div class="icon-box icon-top">
    <div class="icon-box-contain selected">
        <i class="fa fa-rocket fa-primary"></i>
        <h5>Top icon box</h5>
        <p>
            [...]
        </p>
        <p><a class="btn-e btn-e-primary btn-sm" href="javascript:void(0);">Learn more +</a></p>
    </div>
</div>
<div class="icon-box icon-top">
    <div class="icon-box-contain selected">
        <i class="fa fa-magic"></i>
        <h5>Top icon box</h5>
        <p>
            [...]
        </p>
        <p><a class="btn-e btn-e-default btn-bordered btn-sm" href="javascript:void(0);">Learn more +</a></p>
    </div>
</div>
<div class="icon-box icon-top">
    <div class="icon-box-contain">
        <i class="fa fa-trophy fa-primary"></i>
        <h5>Top icon box</h5>
        <p>
            [...]
        </p>
        <p><a class="btn-e btn-e-primary btn-sm" href="javascript:void(0);">Learn more +</a></p>
    </div>
</div>

Default icon box

Sed qualisque ullamcorper ut. Graecis expetendis omittantur cu his. Facer recusabo pericula ei pri.

Shortcode

<div class="icon-box box-default">
    <div class="icon-box-contain">
        <i class="fa fa-laptop fa-3x"></i>
        <h5>Default icon box</h5>
        <p>
            [...]
        </p>
    </div>
    <i class="fa fa-laptop icon-bg"></i>
</div>

Primary icon box

Sed qualisque ullamcorper ut. Graecis expetendis omittantur cu his. Facer recusabo pericula ei pri.

Shortcode

<div class="icon-box box-primary">
    <div class="icon-box-contain">
        <i class="fa fa-flask fa-3x"></i>
        <h5>Primary icon box</h5>
        <p>
            [...]
        </p>
    </div>
    <i class="fa fa-flask icon-bg"></i>
</div>

Image icon box

Sed qualisque ullamcorper ut. Graecis expetendis omittantur cu his. Facer recusabo pericula ei pri.

Shortcode

<div class="icon-box box-image">
    <div class="box-background">
        <img src="img/service_1.jpg" alt="box image background 01" />
    </div>
    <div class="icon-box-contain">
        <i class="fa fa-tablet fa-3x"></i>
        <h5>Image icon box</h5>
        <p>
            [...]
        </p>
    </div>
    <i class="fa fa-tablet icon-bg"></i>
</div>

Column grey

No mea copiosae maluisset, qui elit graecis in, in diam tollit ridens mea. Dicit labores detracto vix at. Et vim modo recusabo eloquentiam. Ad per liber consul indoctum et ius idque.

Column default

No mea copiosae maluisset, qui elit graecis in, in diam tollit ridens mea. Dicit labores detracto vix at. Et vim modo recusabo eloquentiam. Ad per liber consul indoctum et ius idque.

Column primary

No mea copiosae maluisset, qui elit graecis in, in diam tollit ridens mea. Dicit labores detracto vix at. Et vim modo recusabo eloquentiam. Ad per liber consul indoctum et ius idque.

Shortcode

<div class="icon-column-wrapp">
    <div class="icon-column box-grey">
        <div class="icon-column-contain">
            <i class="fa fa-coffee fa-2x"></i>
            <h5>Column grey</h5>
            <p>
                [...]
            </p>
        </div>
        <i class="fa fa-coffee icon-bg"></i>
    </div>
    <div class="icon-column box-default">
        <div class="icon-column-contain">
            <i class="fa fa-camera fa-2x"></i>
            <h5>Column default</h5>
            <p>
                [...]
            </p>
        </div>
        <i class="fa fa-camera icon-bg"></i>
    </div>
    <div class="icon-column box-primary">
        <div class="icon-column-contain">
            <i class="fa fa-comments fa-2x"></i>
            <h5>Column primary</h5>
            <p>
                [...]
            </p>
        </div>
        <i class="fa fa-comments icon-bg"></i>
    </div>
</div>

Text with left icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei. Ex blandit volutpat consequuntur mel alia nihil nusquam.

Text with left icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei. Ex blandit volutpat consequuntur mel alia nihil nusquam.

Text with left icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei. Ex blandit volutpat consequuntur mel alia nihil nusquam.

Shortcode

<div class="col-icon pull-left">
    <i class="fa fa-wrench icon-circle fa-primary"></i>
    <h5>Text with left icon</h5>
    <p>
    [...]
    </p>
</div>

Text with left icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei. Ex blandit volutpat consequuntur mel alia nihil nusquam.

Text with left icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei. Ex blandit volutpat consequuntur mel alia nihil nusquam.

Text with left icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei. Ex blandit volutpat consequuntur mel alia nihil nusquam.

Shortcode

<div class="col-icon pull-left">
    <i class="fa fa-wrench fa-2x icon-circle icon-bordered fa-primary"></i>
    <h5>Text with left icon</h5>
    <p>
        [...]
    </p>
</div>
<div class="col-icon pull-left">
    <i class="fa fa-upload fa-2x icon-circle icon-bordered fa-primary"></i>
    <h5>Text with left icon</h5>
    <p>
        [...]
    </p>
</div>
<div class="col-icon pull-left">
    <i class="fa fa-thumbs-up fa-2x icon-circle icon-bordered fa-primary"></i>
    <h5>Text with left icon</h5>
    <p>
        [...]
    </p>
</div>

Text with right icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei. Ex blandit volutpat consequuntur mel, alia nihil nusquam at vel in vim electram.

Text with right icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei. Ex blandit volutpat consequuntur mel, alia nihil nusquam at vel in vim electram.

Text with right icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei. Ex blandit volutpat consequuntur mel, alia nihil nusquam at vel in vim electram.

Shortcode

<div class="col-icon pull-right">
    <i class="fa fa-laptop fa-3x fa-brown"></i>
    <h5>Text with right icon</h5>
    <p>
        [...]
    </p>
</div>
<div class="col-icon pull-right">
    <i class="fa fa-coffee fa-3x fa-yellow"></i>
    <h5>Text with right icon</h5>
    <p>
        [...]
    </p>
</div>
<div class="col-icon pull-right">
    <i class="fa fa-download fa-3x fa-red"></i>
    <h5>Text with right icon</h5>
    <p>
        [...]
    </p>
</div>

Text with center icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei. Ex blandit volutpat consequuntur mel, alia nihil nusquam at vel in vim electram.

Text with center icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei. Ex blandit volutpat consequuntur mel, alia nihil nusquam at vel in vim electram.

Text with center icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei. Ex blandit volutpat consequuntur mel, alia nihil nusquam at vel in vim electram.

Shortcode

<div class="col-icon centered">
    <i class="fa fa-gift fa-3x fa-yellow rounded-2x icon-square"></i>
    <h5>Text with center icon</h5>
    <p>
        [...]
    </p>
</div>
<div class="col-icon centered">
    <i class="fa fa-flask fa-2x fa-light-green rounded-4x icon-square"></i>
    <h5>Text with center icon</h5>
    <p>
        [...]
    </p>
</div>
<div class="col-icon centered">
    <i class="fa fa-trophy fa-2x icon-circle"></i>
    <h5>Text with center icon</h5>
    <p>
        [...]
    </p>
</div>

Text with center icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei. Ex blandit volutpat consequuntur mel, alia nihil nusquam at vel in vim electram.

Text with center icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei. Ex blandit volutpat consequuntur mel, alia nihil nusquam at vel in vim electram.

Text with center icon

Cu nec salutandi voluptatibus. Ceteros definitionem ad ius, ut eam unum volutpat, omnium gloriatur te mei. Ex blandit volutpat consequuntur mel, alia nihil nusquam at vel in vim electram.