Content boxes

Documentation of all the content box types

Content box general settings

Installation

<link rel="stylesheet" href="../../HTWF/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 (../../HTWF/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

Content box title


Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, arem aperiamo.

Read more

Content box title


Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, arem aperiamo.

Read more

Content box title

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod incididunt ut labore etaliqua a tunali.

Content box title

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod incididunt ut labore etaliqua a tunali.

Content box title

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod incididunt ut labore etaliqua a tunali.


Content box title

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod incididunt ut labore etaliqua a tunali.

Content box title

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod incididunt ut labore etaliqua a tunali.

Content box title

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod incididunt ut labore etaliqua a tunali.

Content box title

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, arem aperiamo.

Content box title

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, arem aperiamo.


Content box title

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, arem aperiamo.

Content box title

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, arem aperiamo.

Content box title

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, arem aperiamo.

Content box title

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, arem aperiamo.


Content box title

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, arem aperiamo.

Content box title

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, arem aperiamo.

02 OCT, 18

Content box title

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read more
03 OCT, 18

Content box title

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read more

Content box title

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read more

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="http://www.framework-y.com/images/thumb-wide.png" alt="" /></div>
        </div>
        <div class="col-md-8">
            <h3>Content box title</h3>
            <hr class="anima">
            <p>
                     Interdum iusto pulvinar consequuntur augue optio, repellat fuga! Purus expedita fusce.
            </p>
            <a class="btn btn-sm " href="#">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>Content box title</h3>
        <p>
             Interdum iusto pulvinar consequuntur augue optio, repellat fuga! Purus expedita fusco.
        </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>Content box title</h3>
    <p>
         Interdum iusto pulvinar consequuntur augue optio, repellat fuga! Purus expedita fusce.
    </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>Content box title</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>Content box title</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="btn btn-sm " href="#">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 (../../HTWF/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

Contect box title


26.05.2015 Category Admin

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, arem aperiamo.

Read more

Contect box title


26.05.2015 Category Admin

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, arem aperiamo.

Read more

Contect box title


26.05.2015 Category Admin

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, arem aperiamo.

Read more

25

July 2018

2

Content box title

Travel, Motors Admin

Lorem ipsum dolore consectetur adipisicing elito 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.

Read more

25

July 2018

2

Content box title

Travel, Motors Admin

Lorem ipsum dolore consectetur adipisicing elito 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.

Read more

25

July 2018

2

Content box title

Travel, Motors Admin

Lorem ipsum dolore consectetur adipisicing elito 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.

Read more

25

July 2018

2

Content box title

Travel, Motors Admin

Lorem ipsum dolore consectetur adipisicing elito 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.

Read more

25

Jul 18

2

Lorem ipsum dolore consectetur adipisicing elito 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 erro.

Read more

25

Jul 18

2

Lorem ipsum dolore consectetur adipisicing elito 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 erro.

Read more

25

Jul 18

2

Lorem ipsum dolore consectetur adipisicing elito 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 erro.

Read more

25

Jul 18

2

Lorem ipsum dolore consectetur adipisicing elito 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 erro.

Read more

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

Mary Groot - Facebook

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

Vaky Yu - Yahoo

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

Sebastian Cesca - Juventus

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

Erik Doro - Nike

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

Federico SchiocchetGoogle

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

Erik DoroNike

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

Sara Parker

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

Jessica Alba

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

Sara Parker

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

Jessica Alba

Jack Martinez

Founder


Lorem Ipsum is simply dummy text of the printing and industro.

Sarah Perk

Marketing expert


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

Oliver Nardin

Designer


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

25 $

Basic plan

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

Plus plan

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

Deluze plan

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

Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Utenim ad minim veniam quis nostrud exercitationo.


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="http://www.framework-y.com/images/thumb-wide.png" alt="" />
            </a>
            <!-- SLIDER -->
            <!-- <div class="flexslider slider nav-inner">
                <ul class="slides">
                    <li>
                        <img src="http://www.framework-y.com/images/thumb-wide.png" alt="" />
                    </li>
                    <li>
                        <img src="http://www.framework-y.com/images/thumb-wide.png" 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>
                Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incididunt
                ut labore et dolore magna aliqua. Ut enim ad minim veniam, arem aperiamo.
            </p>
            <a class="btn-text" href="#">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 2018</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="http://www.framework-y.com/images/thumb-wide.png" alt="" /></a>
    <!-- SLIDER -->
    <!-- <div class="flexslider slider nav-inner">
        <ul class="slides">
            <li>
                <img src="http://www.framework-y.com/images/thumb-wide.png" alt="" />
            </li>
            <li>
                <img src="http://www.framework-y.com/images/thumb-wide.png" 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="btn btn-sm " href="#">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 2018</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="http://www.framework-y.com/images/thumb-wide.png" alt="">
    </a>
    <!-- SLIDER -->
    <!-- <div class="flexslider slider nav-inner">
        <ul class="slides">
            <li>
                <img src="http://www.framework-y.com/images/thumb-wide.png" alt="" />
            </li>
            <li>
                <img src="http://www.framework-y.com/images/thumb-wide.png" 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="btn btn-sm " href="#">Read more</a>
</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>
        Lorem ipsum dolor sitamet consectetur adipisicing elito 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>
        Lorem ipsum dolor sitamet consectetur adipisicing elito 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="btn btn-sm " href="#">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="btn btn-sm" href="#">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 (../../HTWF/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 (../../HTWF/scripts/flexslider/jquery.flexslider-min.js' and ../../HTWF/scripts/flexslider/flexslider.css)

Slider documentation here