Icon Boxes

Icon Boxes Shortcodes

Icon Boxes are great to show the content of your website and can be set in different styles.


HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<div class="featured-boxes featured-boxes-style-8">
    <div class="row">
        <div class="col-md-6">
            <div class="featured-box featured-box-primary featured-box-text-left">
                <div class="box-content">
                    <div class="row">
                        <div class="col-md-9">
                            <h2>Loved by Customers</h2>
                        </div>
                        <div class="col-md-3">
                            <div class="align-right">
                                <em class="icon-featured fa fa-user"></em>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet. Quisque rutrum pellentesque imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.</p>
                            <button type="button" class="btn btn-lg btn-primary mr-xs mb-lg">Learn More</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="featured-box featured-box-secondary featured-box-text-left">
                <div class="box-content">
                    <div class="row">
                        <div class="col-md-12">
                            <em class="icon-featured fa fa-book pull-left mr-lg"></em>
                            <h2>Well Documented</h2>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet. Quisque rutrum pellentesque imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.</p>
                            <button type="button" class="btn btn-lg btn-secondary mr-xs mb-lg">Learn More</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<div class="featured-boxes featured-boxes-style-8">
    <div class="row">
        <div class="col-md-6">
            <div class="featured-box featured-box-tertiary mt-sm">
                <div class="box-content">
                    <div class="row">
                        <div class="col-md-12">
                            <em class="icon-featured fa fa-trophy m-none"></em>
                            <h2 class="mb-none">Winner</h2>
                            <div class="divider divider-small divider-small-center">
                                <hr />
                            </div>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet. Quisque rutrum pellentesque imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.</p>
                            <button type="button" class="btn btn-tertiary mr-xs mb-lg">Learn More</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="featured-box featured-box-quaternary mt-sm">
                <div class="box-content">
                    <div class="row">
                        <div class="col-md-12">
                            <em class="icon-featured fa fa-cogs m-none"></em>
                            <h2 class="mb-lg">Customizable</h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet. Quisque rutrum pellentesque imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing metus elit.</p>
                            <div class="divider divider-small divider-small-center">
                                <hr />
                            </div>
                            <button type="button" class="btn btn-quaternary mr-xs mb-lg">Learn More</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<div class="featured-boxes">
    <div class="row">
        <div class="col-md-3 col-sm-6">
            <div class="featured-box featured-box-primary featured-box-effect-1">
                <div class="box-content">
                    <em class="icon-featured fa fa-user"></em>
                    <h4 class="text-uppercase">Loved by Customers</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
                    <p><a class="lnk-primary learn-more" href="#">Learn More <em class="fa fa-angle-right"></em></a></p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="featured-box featured-box-secondary featured-box-effect-1">
                <div class="box-content">
                    <em class="icon-featured fa fa-book"></em>
                    <h4 class="text-uppercase">Well Documented</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
                    <p><a class="lnk-secondary learn-more" href="#">Learn more <em class="fa fa-angle-right"></em></a></p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="featured-box featured-box-tertiary featured-box-effect-1">
                <div class="box-content">
                    <em class="icon-featured fa fa-trophy"></em>
                    <h4 class="text-uppercase">Winner</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
                    <p><a class="lnk-tertiary learn-more" href="#">Learn more <em class="fa fa-angle-right"></em></a></p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="featured-box featured-box-quaternary featured-box-effect-1">
                <div class="box-content">
                    <em class="icon-featured fa fa-cogs"></em>
                    <h4 class="text-uppercase">Customizable</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus. </p>
                    <p><a class="lnk-quaternary learn-more" href="#">Learn more <em class="fa fa-angle-right"></em></a></p>
                </div>
            </div>
        </div>
    </div>
</div>

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div class="featured-boxes featured-boxes-flat">
    <div class="row">
        <div class="col-md-3 col-sm-6">
            <div class="featured-box featured-box-primary featured-box-effect-2">
                <div class="box-content">
                    <em class="icon-featured fa fa-user"></em>
                    <h4>Loved by Customers</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="featured-box featured-box-secondary featured-box-effect-2">
                <div class="box-content">
                    <em class="icon-featured fa fa-book"></em>
                    <h4>Well Documented</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="featured-box featured-box-tertiary featured-box-effect-2">
                <div class="box-content">
                    <em class="icon-featured fa fa-trophy"></em>
                    <h4>Winner</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="featured-box featured-box-quaternary featured-box-effect-2">
                <div class="box-content">
                    <em class="icon-featured fa fa-cogs"></em>
                    <h4>Customizable</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus. </p>
                </div>
            </div>
        </div>
    </div>
</div>

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div class="featured-boxes featured-boxes-style-3 featured-boxes-flat">
    <div class="row">
        <div class="col-md-3 col-sm-6">
            <div class="featured-box featured-box-primary featured-box-effect-3">
                <div class="box-content">
                    <em class="icon-featured fa fa-user"></em>
                    <h4>Loved by Customers</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="featured-box featured-box-secondary featured-box-effect-3">
                <div class="box-content">
                    <em class="icon-featured fa fa-book"></em>
                    <h4>Well Documented</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="featured-box featured-box-tertiary featured-box-effect-3">
                <div class="box-content">
                    <em class="icon-featured fa fa-trophy"></em>
                    <h4>Winner</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="featured-box featured-box-quaternary featured-box-effect-3">
                <div class="box-content">
                    <em class="icon-featured fa fa-cogs"></em>
                    <h4>Customizable</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus. </p>
                </div>
            </div>
        </div>
    </div>
</div>

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div class="featured-boxes featured-boxes-style-3 featured-boxes-flat">
    <div class="row">
        <div class="col-md-3 col-sm-6">
            <div class="featured-box featured-box-primary featured-box-effect-3">
                <div class="box-content">
                    <em class="icon-featured fa fa-user"></em>
                    <h4>Loved by Customers</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="featured-box featured-box-secondary featured-box-effect-3">
                <div class="box-content">
                    <em class="icon-featured fa fa-book"></em>
                    <h4>Well Documented</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="featured-box featured-box-tertiary featured-box-effect-3">
                <div class="box-content">
                    <em class="icon-featured fa fa-trophy"></em>
                    <h4>Winner</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="featured-box featured-box-quaternary featured-box-effect-3">
                <div class="box-content">
                    <em class="icon-featured fa fa-cogs"></em>
                    <h4>Customizable</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus. </p>
                </div>
            </div>
        </div>
    </div>
</div>

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div class="featured-boxes featured-boxes-style-4">
    <div class="row">
        <div class="col-md-3">
            <div class="featured-box featured-box-primary" data-appear-animation="fadeInUp" data-appear-animation-delay="300">
                <div class="box-content">
                    <em class="icon-featured fa fa-user"></em>
                    <h4>Loved by Customers</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="featured-box featured-box-secondary" data-appear-animation="fadeInUp" data-appear-animation-delay="600">
                <div class="box-content">
                    <em class="icon-featured fa fa-book"></em>
                    <h4>Well Documented</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="featured-box featured-box-tertiary" data-appear-animation="fadeInUp" data-appear-animation-delay="900">
                <div class="box-content">
                    <em class="icon-featured fa fa-trophy"></em>
                    <h4>Winner</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="featured-box featured-box-quaternary" data-appear-animation="fadeInUp" data-appear-animation-delay="1200">
                <div class="box-content">
                    <em class="icon-featured fa fa-cogs"></em>
                    <h4>Customizable</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus. </p>
                </div>
            </div>
        </div>
    </div>
</div>

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div class="featured-boxes featured-boxes-style-5">
    <div class="row">
        <div class="col-md-3">
            <div class="featured-box featured-box-primary featured-box-effect-4">
                <div class="box-content">
                    <em class="icon-featured fa fa-user"></em>
                    <h4>Loved by Customers</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="featured-box featured-box-secondary featured-box-effect-4">
                <div class="box-content">
                    <em class="icon-featured fa fa-book"></em>
                    <h4>Well Documented</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="featured-box featured-box-tertiary featured-box-effect-4">
                <div class="box-content">
                    <em class="icon-featured fa fa-trophy"></em>
                    <h4>Winner</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="featured-box featured-box-quaternary featured-box-effect-4">
                <div class="box-content">
                    <em class="icon-featured fa fa-cogs"></em>
                    <h4>Customizable</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus. </p>
                </div>
            </div>
        </div>
    </div>
</div>

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div class="featured-boxes featured-boxes-style-6">
    <div class="row">
        <div class="col-md-3">
            <div class="featured-box featured-box-primary featured-box-effect-6">
                <div class="box-content">
                    <em class="icon-featured fa fa-user"></em>
                    <h4>Loved by Customers</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="featured-box featured-box-secondary featured-box-effect-6">
                <div class="box-content">
                    <em class="icon-featured fa fa-book"></em>
                    <h4>Well Documented</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="featured-box featured-box-tertiary featured-box-effect-6">
                <div class="box-content">
                    <em class="icon-featured fa fa-trophy"></em>
                    <h4>Winner</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="featured-box featured-box-quaternary featured-box-effect-6">
                <div class="box-content">
                    <em class="icon-featured fa fa-cogs"></em>
                    <h4>Customizable</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus. </p>
                </div>
            </div>
        </div>
    </div>
</div>

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div class="featured-boxes featured-boxes-style-7">
    <div class="row">
        <div class="col-md-3">
            <div class="featured-box featured-box-primary featured-box-effect-7">
                <div class="box-content">
                    <em class="icon-featured fa fa-user"></em>
                    <h4>Loved by Customers</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="featured-box featured-box-secondary featured-box-effect-7">
                <div class="box-content">
                    <em class="icon-featured fa fa-book"></em>
                    <h4>Well Documented</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="featured-box featured-box-tertiary featured-box-effect-7">
                <div class="box-content">
                    <em class="icon-featured fa fa-trophy"></em>
                    <h4>Winner</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="featured-box featured-box-quaternary featured-box-effect-7">
                <div class="box-content">
                    <em class="icon-featured fa fa-cogs"></em>
                    <h4>Customizable</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus. </p>
                </div>
            </div>
        </div>
    </div>
</div>

Customer Support

Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.

Sliders

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla.

Elite

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div class="row">
    <div class="col-md-4">
        <div class="feature-box">
            <div class="feature-box-icon">
                <em class="fa fa-group"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm">Customer Support</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="feature-box">
            <div class="feature-box-icon">
                <em class="fa fa-film"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm">Sliders</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla.</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="feature-box dark">
            <div class="feature-box-icon">
                <em class="fa fa-bars"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm">Elite</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla.</p>
            </div>
        </div>
    </div>
</div>

Customer Support

Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.

Sliders

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla.

Elite

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div class="row">
    <div class="col-md-4">
        <div class="feature-box feature-box-style-3">
            <div class="feature-box-icon">
                <em class="fa fa-group"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm">Customer Support</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="feature-box feature-box-style-3">
            <div class="feature-box-icon">
                <em class="fa fa-film"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm">Sliders</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla.</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="feature-box feature-box-style-3">
            <div class="feature-box-icon">
                <em class="fa fa-bars"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm">Elite</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla.</p>
            </div>
        </div>
    </div>
</div>

Customer Support

Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.

Sliders

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla.

Elite

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div class="row">
    <div class="col-md-4">
        <div class="feature-box feature-box-style-3">
            <div class="feature-box-icon">
                <em class="fa fa-group"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm">Customer Support</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="feature-box feature-box-style-3">
            <div class="feature-box-icon">
                <em class="fa fa-film"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm">Sliders</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla.</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="feature-box feature-box-style-3">
            <div class="feature-box-icon">
                <em class="fa fa-bars"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm">Elite</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla.</p>
            </div>
        </div>
    </div>
</div>

Customer Support

Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.

Sliders

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla.

Elite

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div class="row">
    <div class="col-md-4">
        <div class="feature-box feature-box-style-2">
            <div class="feature-box-icon">
                <em class="fa fa-group"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm">Customer Support</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="feature-box feature-box-style-2">
            <div class="feature-box-icon">
                <em class="fa fa-film"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm">Sliders</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla.</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="feature-box feature-box-style-2">
            <div class="feature-box-icon">
                <em class="fa fa-bars"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm">Elite</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla.</p>
            </div>
        </div>
    </div>
</div>

Customer Support

Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.

Sliders

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla.

Elite

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div class="row">
    <div class="col-md-4">
        <div class="feature-box feature-box-style-5">
            <div class="feature-box-icon">
                <em class="fa fa-group"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm text-uppercase">Customer Support</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="feature-box feature-box-style-5">
            <div class="feature-box-icon">
                <em class="fa fa-film"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm text-uppercase">Sliders</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla.</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="feature-box feature-box-style-5">
            <div class="feature-box-icon">
                <em class="fa fa-bars"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm text-uppercase">Elite</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla.</p>
            </div>
        </div>
    </div>
</div>

Customer Support

Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.

Sliders

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla.

Elite

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div class="row">
    <div class="col-md-4">
        <div class="feature-box feature-box-style-4">
            <div class="feature-box-icon">
                <em class="fa fa-group"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm text-uppercase">Customer Support</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="feature-box feature-box-style-4">
            <div class="feature-box-icon">
                <em class="fa fa-film"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm text-uppercase">Sliders</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla.</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="feature-box feature-box-style-4">
            <div class="feature-box-icon">
                <em class="fa fa-bars"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm text-uppercase">Elite</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum pellentesque imperdiet. Nulla lacinia iaculis nulla.</p>
            </div>
        </div>
    </div>
</div>

Customer Support

Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.

Customer Support

Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.

Customer Support

Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.

Customer Support

Lorem ipsum dolor sit amet, consectetur adipiscing metus elit.

HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<div class="row">
    <div class="col-md-3">
        <div class="feature-box feature-box-primary">
            <div class="feature-box-icon">
                <em class="fa fa-group"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm">Customer Support</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="feature-box feature-box-style-2 feature-box-secondary">
            <div class="feature-box-icon">
                <em class="fa fa-group"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm">Customer Support</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="feature-box feature-box-style-3 feature-box-tertiary">
            <div class="feature-box-icon">
                <em class="fa fa-group"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm">Customer Support</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.</p>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="feature-box feature-box-style-4 feature-box-quaternary">
            <div class="feature-box-icon">
                <em class="fa fa-group"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm">Customer Support</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit.</p>
            </div>
        </div>
    </div>
</div>

Colors


HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div class="featured-boxes-full">
    <div class="col-md-3">
        <div class="featured-box-full featured-box-full-primary">
            <em class="fa fa-group"></em>
            <h4>Customer Support</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet. Quisque rutrum pellentesque imperdiet.</p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="featured-box-full featured-box-full-secondary">
            <em class="fa fa-film"></em>
            <h4>Sliders</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet. Quisque rutrum pellentesque imperdiet.</p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="featured-box-full featured-box-full-tertiary">
            <em class="fa fa-trophy"></em>
            <h4>Winner</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing metus elit.</p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="featured-box-full featured-box-full-quaternary">
            <em class="fa fa-cogs"></em>
            <h4>Customizable</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet. Quisque rutrum pellentesque imperdiet.</p>
        </div>
    </div>
</div>

Full Width



HTML Shortcode

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div class="featured-boxes-full featured-boxes-full-scale">
    <div class="col-md-3">
        <div class="featured-box-full featured-box-full-primary">
            <em class="fa fa-group"></em>
            <h4>Customer Support</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet. Quisque rutrum pellentesque imperdiet.</p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="featured-box-full featured-box-full-primary">
            <em class="fa fa-film"></em>
            <h4>Sliders</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet. Quisque rutrum pellentesque imperdiet.</p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="featured-box-full featured-box-full-primary">
            <em class="fa fa-trophy"></em>
            <h4>Winner</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing metus elit.</p>
        </div>
    </div>
    <div class="col-md-3">
        <div class="featured-box-full featured-box-full-primary">
            <em class="fa fa-cogs"></em>
            <h4>Customizable</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet. Quisque rutrum pellentesque imperdiet.</p>
        </div>
    </div>
</div>

Animations

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div class="featured-boxes featured-boxes-style-4">
    <div class="row">
        <div class="col-md-3">
            <div class="featured-box featured-box-primary" data-appear-animation="fadeInUp" data-appear-animation-delay="300">
                <div class="box-content">
                    <em class="icon-featured fa fa-user"></em>
                    <h4>Loved by Customers</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="featured-box featured-box-secondary" data-appear-animation="fadeInUp" data-appear-animation-delay="600">
                <div class="box-content">
                    <em class="icon-featured fa fa-book"></em>
                    <h4>Well Documented</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="featured-box featured-box-tertiary" data-appear-animation="fadeInUp" data-appear-animation-delay="900">
                <div class="box-content">
                    <em class="icon-featured fa fa-trophy"></em>
                    <h4>Winner</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus.</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="featured-box featured-box-quaternary" data-appear-animation="fadeInUp" data-appear-animation-delay="1200">
                <div class="box-content">
                    <em class="icon-featured fa fa-cogs"></em>
                    <h4>Customizable</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus. </p>
                </div>
            </div>
        </div>
    </div>
</div>

Reverse / Normal

Customer Support

Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.

Customer Support

Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.

Customer Support

Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.

Customer Support

Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.

Customer Support

Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.

Customer Support

Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.

Customer Support

Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.

Customer Support

Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.

Customer Support

Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.

Customer Support

Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.

Customer Support

Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.

Customer Support

Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.

HTML Shortcode

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<div class="row">
    <div class="col-md-6">
        <div class="feature-box reverse">
            <div class="feature-box-icon">
                <em class="fa fa-group"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm">Customer Support</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.</p>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="feature-box">
            <div class="feature-box-icon">
                <em class="fa fa-group"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm">Customer Support</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.</p>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="feature-box feature-box-style-3 reverse">
            <div class="feature-box-icon">
                <em class="fa fa-group"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm">Customer Support</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.</p>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="feature-box feature-box-style-3">
            <div class="feature-box-icon">
                <em class="fa fa-group"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm">Customer Support</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.</p>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="feature-box feature-box-style-6 reverse">
            <div class="feature-box-icon">
                <em class="fa fa-group"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm">Customer Support</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.</p>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="feature-box feature-box-style-6">
            <div class="feature-box-icon">
                <em class="fa fa-group"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm">Customer Support</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.</p>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="feature-box feature-box-style-2 reverse">
            <div class="feature-box-icon">
                <em class="fa fa-group"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm">Customer Support</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.</p>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="feature-box feature-box-style-2">
            <div class="feature-box-icon">
                <em class="fa fa-group"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm">Customer Support</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.</p>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="feature-box feature-box-style-5 reverse">
            <div class="feature-box-icon">
                <em class="fa fa-group"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm">Customer Support</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.</p>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="feature-box feature-box-style-5">
            <div class="feature-box-icon">
                <em class="fa fa-group"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm">Customer Support</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.</p>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6">
        <div class="feature-box feature-box-style-4 reverse">
            <div class="feature-box-icon">
                <em class="fa fa-group"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm">Customer Support</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.</p>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="feature-box feature-box-style-4">
            <div class="feature-box-icon">
                <em class="fa fa-group"></em>
            </div>
            <div class="feature-box-info">
                <h4 class="mb-sm">Customer Support</h4>
                <p class="mb-lg">Lorem ipsum dolor sit amet, consectetur adipiscing metus elit. Quisque rutrum pellentesque imperdiet.</p>
            </div>
        </div>
    </div>
</div>