Component

Content boxes

CONTENT BOX INTROCUTION


Installation

<link rel="stylesheet" href="../css/content-box.css">

Main settings

Name Type Description
Animations Mixed The animations are a feature of animations component.
Component dependency

This feature require animations component (../css/animations.css)

Animations documentation here
Boxed box CSS class To set boxed style add class boxed to content box object. Example: <div class="base-box boxed"> ... </div>.
Titles Information All titles of base boxes are part of typography page and can be setted with different designs. Typography page here
Buttons Information All buttons of base boxes are part of Bootstrap components and can be setted with different designs.
Bootstrap components page here
Link Information To link the whole component without the need of a button add attribute data-href="target" to the component, use attribute data-target="_blank" for open the link in a new window.

ADVANCED CONTENT BOXES


Examples

MULTI SERVICES BOX


L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...

Enter now

MULTI SERVICES BOX


L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...

Enter now

Multi services box

L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod incididunt ut labore etaliqua a tun ali ...

Multi services box

L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod incididunt ut labore etaliqua a tun ali ...

Multi services box

L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod incididunt ut labore etaliqua a tun ali ...


Multi services box

L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod incididunt ut labore etaliqua a tun ali ...

Multi services box

L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod incididunt ut labore etaliqua a tun ali ...

Multi services box

L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod incididunt ut labore etaliqua a tun ali ...

Multi services box

L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...

Multi services box

L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...


Multi services box

L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...

Multi services box

L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...

Multi services box

L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...

Multi services box

L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...


Multi services box

L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...

Multi services box

L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...

02 OCT, 15

Multi services box

L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...

Enter now

Multi services box

L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...

Enter now

Usage

<div class="advs-box advs-box-side" data-anima="fade-left" data-trigger="hover">
    <div class="row">
        <div class="col-md-4">
            <div class="img-box"><img src="../images/large/large_wide_1.jpg" alt="" /></div>
        </div>
        <div class="col-md-8">
            <h3>MULTI SERVICES BOX</h3>
            <hr class="anima">
            <p>
                     Interdum iusto pulvinar consequuntur augue optio, repellat fuga! Purus expedita fusce temporibus est odit mi quos? Aliquid semper, veritatis dignissimos.
            </p>
            <a class="anima-button circle-button btn-sm" href="#"><i class="fa fa-long-arrow-right"></i>Enter now </a>
        </div>
    </div>
</div>
<div class="advs-box advs-box-top-icon-img boxed-inverse">
    <a class="img-box lightbox img-scale-up" href="#">
        <span><img src="http://www.framework-y.com/images/thumb-wide.png" alt=""></span>
    </a>
    <div class="advs-box-content">
        <h3>Multi services box</h3>
        <p>
             Interdum iusto pulvinar consequuntur augue optio, repellat fuga! Purus expedita fusce temporibus est odit mi quos? Aliquid semper, veritatis dignissimos.
        </p>
    </div>
</div> 
<div class="advs-box advs-box-top-icon" data-anima="rotate-20" data-trigger="hover">
    <i class="fa fa-smile-o icon circle anima"></i>
    <h3>Multi services box</h3>
    <p>
         Interdum iusto pulvinar consequuntur augue optio, repellat fuga! Purus expedita fusce temporibus est odit mi quos? Aliquid semper, veritatis dignissimos.
    </p>
</div>
<div class="advs-box advs-box-side-icon" data-anima="scale-up" data-trigger="hover">
    <div class="icon-box">
        <i class="fa fa-smile-o icon anima"></i>
    </div>
    <div class="caption-box">
        <h3>Multi services box</h3>
        <p>
              Interdum iusto pulvinar consequuntur augue optio, repellat fuga! Purus expedita fusce temporibus est odit mi quos? Aliquid semper, veritatis dignissimos.
        </p>
    </div>
</div>
<div class="advs-box advs-box-multiple boxed" data-anima="scale-rotate" data-trigger="hover">
    <a class="img-box"><img class="anima" src="http://www.framework-y.com/images/thumb-wide.png" alt="" /></a>
    <div class="circle anima-rotate-20 anima">02 <span>OCT, 15</span></div>
    <div class="advs-box-content">
        <h3>Multi services box</h3>
        <p>
              Interdum iusto pulvinar consequuntur augue optio, repellat fuga! Purus expedita fusce temporibus est odit mi quos? Aliquid semper, veritatis dignissimos.
        </p>
        <a class="anima-button circle-button btn-sm" href="#"><i class="fa fa-long-arrow-right"></i>Enter now </a>
    </div>
</div> 

Main settings

Name Type Description
Animations Mixed The animations are a feature of animations component.
Component dependency

This feature require animations component (../css/animations.css)

Animations documentation here
Boxed box CSS class To set boxed style add class boxed to content box object. Example: <div class="base-box boxed"> ... </div>.
To set boxed inverse style use class boxed-inverse.
Extra content HTML Every content box support a extra field for insert a custom text row, useful for show the category, date or other infos, Insert this after the title tag <span class="extra-content">YOUR TEXT</span>.
Buttons Information All buttons of base boxes are part of Bootstrap components page and can be setted with different designs. Bootstrap components page here

NICHE CONTENT BOXES


Examples

Les tour togheter


26.05.2015 Category Admin

L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...

Read more ...

The new eco-system of nature


26.05.2015 Category Admin

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem ...

Read more ...

Young, nice and funny


26.05.2015 Category Admin

L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...

Read more ...

Les tour togheter


26.05.2015 Category Admin

L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...

Read more ...

Les tour togheter


26.05.2015 Category Admin

L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...

Read more ...

25

July 2015

2

A travel around the wonderful world

Travel, Motors Admin

L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaqueipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam ...

Read more ...

25

July 2015

2

A travel around the wonderful world

Travel, Motors Admin

L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaqueipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam ...

Read more ...

25

July 2015

2

A travel around the wonderful world

Travel, Motors Admin

L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaqueipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam ...

Read more ...

25

July 2015

2

A travel around the wonderful world

Travel, Motors Admin

L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaqueipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam ...

Read more ...

25

July 2015

2

A travel around the wonderful world

Travel, Motors Admin

L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaqueipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam ...

Read more ...

L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaqueipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam ...

Read more ...

L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaqueipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam ...

Read more ...

L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaqueipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam ...

Read more ...

Latest posts

26.05.2015
Return to the future day

Lorem ipsum dolor sit amet, conse adipisicing elit, sed do eiusmod tempor incididunt ...

28.05.2015
The web 3.0 vision

Lorem ipsum dolor sit amet, conse adipisicing elit, sed do eiusmod tempor incididunt ...

02.06.2015
Where to go on holiday ?

Lorem ipsum dolor sit amet, conse adipisicing elit, sed do eiusmod tempor incididunt ...

L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam.

Mary Groot - Facebook

L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam.

Vaky Yu - Yahoo

L'orem ipsum dolor sitamet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam.

Sebastian Cesca - Juventus

L'orem ipsum dolor sitamet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam.

Erik Doro - Nike

L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam.

Federico SchiocchetGoogle

L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam.

Erik DoroNike

L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam.

Sara Parker

L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam.

Jessica Alba

L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam.

Sara Parker

L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam.

Jessica Alba

JACK CHRISTIAN

FOUNDER AND CEO


Lorem Ipsum is simply dummy text of the printing and industry. Lorem has been the industry.

JACK CHRISTIAN

FOUNDER AND CEO


Lorem Ipsum is simply dummy text of the printing and industry. Lorem has been the industry.

JACK CHRISTIAN

FOUNDER AND CEO


Lorem Ipsum is simply dummy text of the and typesetting industry. Lorem Ipsum the industry.

$25/ MONTH

BASIC PLAN

6 versions
PSD + HTML files
Custom design
30 days money back guarante
24/7 support
$85/ MONTH

PLUS PLAN

15 versions
PSD + HTML files
Custom design and coding
30 days money back guarante
24/7 support
$200/ MONTH

DELUXE PLAN

35 versions
PSD + HTML + JPG files
Custom design and coding
30 days money back guarante
24/7 support

Inner call to action - Insert text here and edit your button color and style


Usage

<div class="advs-box advs-box-side-img advs-box-blog" data-anima="scale-rotate" data-trigger="hover">
    <div class="row">
        <div class="col-md-4">
            <a class="img-box">
                <img class="anima" src="../images/thumbs/thumb_5.jpg" alt="" />
            </a>
            <!-- SLIDER -->
            <!-- <div class="flexslider slider nav-inner">
                <ul class="slides">
                    <li>
                        <img src="../images/thumbs/thumb_wide_p2.jpg" alt="" />
                    </li>
                    <li>
                        <img src="../images/thumbs/thumb_wide_p4.jpg" alt="" />
                    </li>
                </ul>
            </div> -->
            <!-- YOUTUBE VIDEO -->
            <!-- <iframe src="https://www.youtube.com/embed/bpqhStV2_rc?showinfo=0&controls=0"></iframe> -->
        </div>
        <div class="col-md-8">
            <h2><a>Les tour togheter</a></h2>
            <hr>
            <div class="tag-row icon-row">
                <span><i class="fa fa-calendar"></i>26.05.2015</span>
                <span><i class="fa fa-bookmark"></i><a href="#">Category</a></span>
                <span><i class="fa fa-pencil"></i>Admin</span>
                <div class="social-group-button">
                    <div class="social-button" data-anima="pulse-vertical" data-trigger="hover">
                        <i class="fa fa-share-alt"></i>
                    </div>
                    <div class="btn-group social-group">
                        <a target="_blank" href="#">
                            <i data-social="share-facebook" class="fa fa-facebook circle"></i>
                        </a>
                        <a target="_blank" href="#">
                            <i data-social="share-twitter" class="fa fa-twitter circle"></i>
                        </a>
                        <a target="_blank" href="#">
                            <i data-social="share-google" class="fa fa-google circle"></i>
                        </a>
                        <a target="_blank" href="#">
                            <i data-social="share-linkedin" class="fa fa-linkedin circle"></i>
                        </a>
                    </div>
                </div>
            </div>
            <p>
                L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt
                ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam ...
            </p>
            <a class="anima-button" href="#"> <i class="fa fa-long-arrow-right"></i>Read more ... </a>
        </div>
    </div>
</div>
<div class="advs-box advs-box-top-icon-img niche-box-post" data-anima="scale-rotate" data-trigger="hover">
    <div class="block-infos">
        <div class="block-data">
            <p class="bd-day">25</p>
            <p class="bd-month">July 2015</p>
        </div>
        <a class="block-comment" href="#">2 <i class="fa fa-comment-o"></i></a>
    </div>
    <a class="img-box"><img class="anima" src="../images/large/large_wide_10.jpg" alt="" /></a>
    <!-- SLIDER -->
    <!-- <div class="flexslider slider nav-inner">
        <ul class="slides">
            <li>
                <img src="../images/thumbs/thumb_wide_p2.jpg" alt="" />
            </li>
            <li>
                <img src="../images/thumbs/thumb_wide_p4.jpg" alt="" />
            </li>
        </ul>
    </div> -->
    <!-- YOUTUBE VIDEO -->
    <!-- <iframe src="https://www.youtube.com/embed/bpqhStV2_rc?showinfo=0&controls=0"></iframe> -->
    <div class="advs-box-content">
        <h2><a href="#">A travel around the wonderful world</a></h2>
        <div class="tag-row">
            <span><i class="fa fa-bookmark"></i> <a href="#">Travel</a>, <a href="#">Motors</a></span>
            <span><i class="fa fa-pencil"></i>Admin</span>
            <div class="social-group-button">
                <div class="social-button" data-anima="pulse-vertical" data-trigger="hover">
                    <i class="fa fa-share-alt"></i>
                </div>
                <div class="btn-group social-group">
                    <a target="_blank" href="#"><i data-social="share-facebook" class="fa fa-facebook circle"></i></a>
                    <a target="_blank" href="#"><i data-social="share-twitter" class="fa fa-twitter circle"></i></a>
                    <a target="_blank" href="#"><i data-social="share-google" class="fa fa-google circle"></i></a>
                    <a target="_blank" href="#"><i data-social="share-linkedin" class="fa fa-linkedin circle"></i></a>
                </div>
            </div>
        </div>
        <p class="niche-box-content">
            ...
        </p>
        <a class="anima-button circle-button btn-sm" href="#"><i class="fa fa-long-arrow-right"></i>Read more ... </a>
    </div>
</div>
<div class="advs-box niche-box-blog">
    <div class="block-top">
        <div class="block-infos">
            <div class="block-data">
                <p class="bd-day">25</p>
                <p class="bd-month">July 2015</p>
            </div>
            <a class="block-comment" href="#">2 <i class="fa fa-comment-o"></i></a>
        </div>
        <div class="block-title">
            <h2><a href="#">Elvis on New York Theater</a></h2>
            <div class="tag-row">
                <span><i class="fa fa-bookmark"></i> <a href="#">Travel</a>, <a href="#">Motors</a></span>
                <span><i class="fa fa-pencil"></i>Admin</span>
                <div class="social-group-button">
                    <div class="social-button" data-anima="pulse-vertical" data-trigger="hover">
                        <i class="fa fa-share-alt"></i>
                    </div>
                    <div class="btn-group social-group">
                        <a target="_blank" href="#"><i data-social="share-facebook" class="fa fa-facebook circle"></i></a>
                        <a target="_blank" href="#"><i data-social="share-twitter" class="fa fa-twitter circle"></i></a>
                        <a target="_blank" href="#"><i data-social="share-google" class="fa fa-google circle"></i></a>
                        <a target="_blank" href="#"><i data-social="share-linkedin" class="fa fa-linkedin circle"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <a class="img-box img-scale-rotate" href="#">
        <img src="../images/large/large_wide_1.jpg" alt="">
    </a>
    <!-- SLIDER -->
    <!-- <div class="flexslider slider nav-inner">
        <ul class="slides">
            <li>
                <img src="../images/thumbs/thumb_wide_p2.jpg" alt="" />
            </li>
            <li>
                <img src="../images/thumbs/thumb_wide_p4.jpg" alt="" />
            </li>
        </ul>
    </div> -->
    <!-- YOUTUBE VIDEO -->
    <!-- <iframe src="https://www.youtube.com/embed/bpqhStV2_rc?showinfo=0&controls=0"></iframe> -->
    <p class="excerpt">
        ...
    </p>
    <a class="anima-button circle-button btn-sm" href="#"><i class="fa fa-long-arrow-right"></i>Read more ... </a>
</div>
<!--EXAMPLE 1--> 
<div class="list-group latest-post-list">
    <p class="list-group-item active">Latest posts</p>
    <div class="list-group-item">
        <div class="row">
            <div class="col-md-4">
                <a class="img-box">
                    <img src="http://www.framework-y.com/images/thumb-wide.png" alt="" />
                </a>
            </div>
            <div class="col-md-8">
                <a href="#">
                    <h5>Return to the future day</h5>
                </a>
                <div class="tag-row"><span><i class="fa fa-calendar"></i>02.06.2015</span></div>
            </div>
        </div>
    </div>
    <div class="list-group-item">
        <div class="row">
            <div class="col-md-4">
                <a class="img-box">
                    <img src="http://www.framework-y.com/images/thumb-wide.png" alt="" />
                </a>
            </div>
            <div class="col-md-8">
                <a href="#">
                    <h5>We can do</h5>
                </a>
                <div class="tag-row"><span><i class="fa fa-calendar"></i>02.06.2015</span></div>
            </div>
        </div>
    </div>
</div>
<!--EXAMPLE 2--> 
<div class="list-group">
    <p class="list-group-item active">Latest posts</p>
    <div class="list-group-item">
        <div class="tag-row"><span><i class="fa fa-calendar"></i>26.05.2015</span></div>
        <a href="#">
            <h5>Return to the future day</h5>
        </a>
        <p>
            ...
        </p>
    </div>
    <div class="list-group-item">
        <div class="tag-row"><span><i class="fa fa-calendar"></i>28.05.2015</span></div>
        <a href="#">
            <h5>The web 3.0 vision</h5>
        </a>
        <p>
            ...
        </p>
    </div>
</div>
<div class="advs-box advs-box-top-icon niche-box-testimonails">
    <i class="fa text-xl circle onlycover" style="background-image:url('http://www.framework-y.com/images/thumb-wide.png')"></i>
    <p>
        <i class="dropcap"><i class="fa fa-quote-left"></i></i> L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt
        ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam.
    </p>
    <h5>Mary Groot - Facebook</h5>
</div> 
<div class="advs-box niche-box-testimonails-cloud">
    <p>
        L'orem ipsum dolor "sitamet", consectetur 'adipisicing' elit, sed do eiusmod tempor incididunt
        ut labore et dolore magna aliqua. Ut enim ad minim veniam, q rem aperiam.
    </p>
    <div class="name-box vertical-row">
        <i class="vertical-col fa text-l circle onlycover" style="background-image:url('http://www.framework-y.com/images/thumb-wide.png')"></i>
        <h5 class="vertical-col subtitle">Federico Schiocchet<span class="subtxt">Google</span></h5>
    </div>
</div> 
<div class="advs-box niche-box-team" data-anima="scale-up" data-trigger="hover">
    <a class="img-box">
        <img class="anima" src="http://www.framework-y.com/images/thumb-wide.png" alt="" />
    </a>
    <div class="content-box">
        <h2>JACK CHRISTIAN</h2>
        <h4>FOUNDER AND CEO</h4>
        <hr class="e" />
        <div class="btn-group social-group">
            <a target="_blank" href="#"><i class="fa fa-facebook"></i></a>
            <a target="_blank" href="#"><i class="fa fa-twitter"></i></a>
            <a target="_blank" href="#"><i class="fa fa-instagram"></i></a>
        </div>
        <p>Lorem Ipsum is simply dummy text of the printing and industry. Lorem has been the industry.</p>
    </div>
</div> 
<div class="col-md-4">
    <div class="list-group pricing-table pricing-table-big">
        <div class="list-group-item pricing-price">
            $85/ <span>MONTH</span>
        </div>
        <div class="list-group-item pricing-name">
            <h3>PLUS PLAN</h3>
        </div>
        <div class="list-group-item">
            15 versions
        </div>
        <div class="list-group-item">
            PSD + HTML files
        </div>
        <div class="list-group-item">
            Custom design and coding
        </div>
        <div class="list-group-item">
            30 days money back guarante
        </div>
        <div class="list-group-item">
            24/7 support
        </div>
    </div>
</div>
<div class="col-md-4">
    <div class="list-group pricing-table">
        <div class="list-group-item pricing-price">
            $200/ <span>MONTH</span>
        </div>
        <div class="list-group-item pricing-name">
            <h3>DELUXE PLAN</h3>
        </div>
        <div class="list-group-item">
            35 versions
        </div>
        <div class="list-group-item">
            PSD + HTML + JPG files
        </div>
        <div class="list-group-item">
            Custom design and coding
        </div>
        <div class="list-group-item">
            30 days money back guarante
        </div>
        <div class="list-group-item">
            24/7 support
        </div>
    </div>
</div>
<!-- INNER EXAMPLE -->
<div class="advs-box call-action-box vertical-row white">
        <div class="col-md-1">
            <i class="fa fa-language action-icon"></i>
        </div>
        <div class="col-md-8">
            <p> ... </p>
        </div>
        <div class="col-md-2">
            <a class="anima-button circle-button btn-sm" href="#"> <i class="fa fa-long-arrow-right"></i>Enter now </a>
        </div>
</div>
<!-- FULL WIDTH EXAMPLE -->
<div class="call-action-box full-width white">
    <div class="container content">
        <div class="advs-box vertical-row">
            <div class="row">
                <div class="col-md-9">
                    <p> ... </p>
                </div>
                <div class="col-md-3">
                    <a class="anima-button circle-button btn-sm " href="#"> 
                        <i class="fa fa-long-arrow-right"></i> Enter now 
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Main settings

Name Type Description
Animations Mixed The animations are a feature of animations component.
Component dependency

This feature require animations component (../css/animations.css)

Animations documentation here
Boxed box CSS class To set boxed style add class boxed to content box object. Example: <div class="base-box boxed"> ... </div>.
To set boxed inverse style use class boxed-inverse.
Buttons Information All buttons of base boxes are part of Bootstrap components page and can be setted with different designs.
Bootstrap components page here
Slider Mixed The slider code is inserted in the examples as a comment, remove chars <!-- ... --> to enable it.
Plugin dependency

This feature require Flex Slider Plugin (../scripts/flexslider/jquery.flexslider-min.js' and ../scripts/flexslider/flexslider.css)

Slider documentation here