Content box

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore et dolore magna.Lorem ipsum dolor sit amet. no sea takimata sanctus est Lorem ipsum dolor sit amet. sed diam voluptua. Lorem ipsum dolor sit amet consectetur adipiscing elitsed do.

Button

Content box

Button

Content box

Button

Content box

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore et dolore magna. Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Utenim ad minim veniam.

Button

Content box

Button

Content box

Button

Content box

Button

Content box

Button

Content box

Button

Content box

Button

Content box

Button

Content box

Button

Extra

Content box

Informationvalue

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Excepteur sint occaecat cupidata.

Button

Extra

Content box

Informationvalue

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Excepteur sint occaecat cupidata.

Button

01 JAN 2018

Content box

Button

01 JAN 2018

Content box

Button

01 JAN 2018

Content box

Button

01 JAN 2018

Content box

Button

01 JAN 2018

Content box

Button

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmo ut labore et dolore magna. Lorem ipsum dolor sit amet consectetur adipiscing.

Full name Company

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmo ut labore et dolore magna. Lorem ipsum dolor sit amet consectetur adipiscing.

Full name Company

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmo ut labore et dolore magna. Lorem ipsum dolor sit amet consectetur adipiscing.

Full name Company

Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmo ut labore et dolore magna. Lorem ipsum dolor sit amet consectetur adipiscing.

Full name Company

Full name

Role

Lorem ipsum dolor sitamet consectetur eiusmo.

Full name

Role

Lorem ipsum dolor sitamet consectetur eiusmo.

Full name

Role

Lorem ipsum dolor sitamet consectetur eiusmo.

Plan name

$19

Per month

Feature description
Feature description
Feature description
Feature description
Feature description
Feature description
Feature description

Order now

Plan name

$19

Per month

Feature description
Feature description
Feature description
Feature description
Feature description
Feature description
Feature description

Order now

Plan name

$19

Per month

Feature description
Feature description
Feature description
Feature description
Feature description
Feature description
Feature description

Order now

Call to action

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

Button

Call to action

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

Button

Usage

<div class="cnt-box cnt-box-side">
    <a href="#" class="img-box"><img src="image.jpg" alt="" /></a>
    <div class="caption">
        <h2>Content box</h2>
        <p>
            Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempore.
        </p>
        <a class="btn-text" href="#">Button</a>
    </div>
</div>

<div class="cnt-box cnt-box-top">
    <a href="#" class="img-box"><img src="image.jpg" alt="" /></a>
    <div class="caption">
        <h2>Content box</h2>
        <p>
            Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempore.
        </p>
        <a class="btn-text" href="#">Button</a>
    </div>
</div>

<div class="cnt-box cnt-box-side-icon">
    <i class="im-paper-plane"></i>
    <div class="caption">
        <h2>Content box</h2>
        <p>
            Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempore.
        </p>
        <a class="btn-text" href="#">Button</a>
    </div>
</div>

<div class="cnt-box cnt-box-top-icon">
    <i class="im-paper-plane"></i>
    <div class="caption">
        <h2>Content box</h2>
        <p>
            Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempore.
        </p>
        <a class="btn-text" href="#">Button</a>
    </div>
</div>

<div class="cnt-box cnt-box-badge">
    <a href="#" class="img-box"><img src="image.jpg" alt="" /></a>
    <div class="caption">
        <div class="badge">1</div>
        <h2>Content box</h2>
        <p>
            Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempore.
        </p>
        <a class="btn-text" href="#">Button</a>
    </div>
</div>

<div class="cnt-box cnt-box-info" data-href="#">
    <div class="extra-field">Extra</div>
    <a href="#" class="img-box"><img src="image.jpg" alt="" /></a>
    <div class="caption">
        <h2>Content box</h2>
        <div class="cnt-info">
            <div><span>Information</span><span>value</span></div>
            <div><span>Information</span><span>value</span></div>
            <div><span>Information</span><span>value</span></div>
        </div>
        <p>
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <div class="bottom-info">
            Excepteur sint occaecat cupidata.
        </div>
        <a class="btn-text" href="#">Button</a>
    </div>
</div>

<div class="cnt-box cnt-box-blog-side">
    <a href="#" class="img-box">
        <div class="blog-date">
            <span>01</span>
            <span>JAN 2018</span>
        </div>
        <img src="image.jpg" alt="" />
    </a>
    <div class="caption">
        <h2>Content box</h2>
        <ul class="icon-list icon-list-horizontal">
            <li><i class="icon-calendar"></i><a href="#">01.01.1111</a></li>
            <li><i class="icon-bookmark"></i><a href="#">Category</a></li>
            <li><i class="icon-user"></i><a href="#">Admin</a></li>
            <li class="icon-links">
                <a href="#" data-social="share-fadebook" data-social-url=""><i class="icon-facebook"></i></a>
                <a href="#" data-social="share-twitter" data-social-url=""><i class="icon-twitter"></i></a>
                <a href="#" data-social="share-linkedin" data-social-url=""><i class="icon-linkedin"></i></a>
            </li>
        </ul>
        <p>
            Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempore.
        </p>
        <a class="btn-text" href="#">Button</a>
    </div>
</div>

<div class="cnt-box cnt-box-blog-top">
    <a href="#" class="img-box">
        <div class="blog-date">
            <span>01</span>
            <span>JAN 2018</span>
        </div>
        <img src="image.jpg" alt="" />
    </a>
    <div class="caption">
        <h2>Content box</h2>
        <ul class="icon-list icon-list-horizontal">
            <li><i class="icon-calendar"></i><a href="#">01.01.1111</a></li>
            <li><i class="icon-bookmark"></i><a href="#">Category</a></li>
            <li class="icon-links">
                <a href="#" data-social="share-fadebook" data-social-url=""><i class="icon-facebook"></i></a>
                <a href="#" data-social="share-twitter" data-social-url=""><i class="icon-twitter"></i></a>
                <a href="#" data-social="share-linkedin" data-social-url=""><i class="icon-linkedin"></i></a>
            </li>
        </ul>
        <p>
            Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempore.
        </p>
        <a class="btn-text" href="#">Button</a>
    </div>
</div>

<div class="cnt-box cnt-box-testimonials">
    <img src="image.jpg" alt="" />
    <p>
        Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempore.
    </p>
    <p class="testimonial-info">
        <span>Full name</span>
        <span>Company</span>
    </p>
</div>

<div class="cnt-box cnt-box-testimonials-bubble">
    <p>
        Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempore.
    </p>
    <div class="thumb-bar">
        <img src="image.jpg" alt="" />
        <p>
            <span>Full name</span>
            <span>Company</span>
        </p>
    </div>
</div>

<div class="cnt-box cnt-box-team">
    <img src="image.jpg" alt="" />
    <div class="caption">
        <h2>Full name</h2>
        <span>Role</span>
        <span class="icon-links">
            <a href="#" target="_blank"><i class="icon-facebook"></i></a>
            <a href="#" target="_blank"><i class="icon-twitter"></i></a>
            <a href="#" target="_blank"><i class="icon-instagram"></i></a>
        </span>
        <p>
            Lorem ipsum dolor sitamet consectetur eiusmo.
        </p>
    </div>
</div>

<div class="cnt-box cnt-pricing-table">
    <div class="top-area">
        <h2>Plan name</h2>
        <div class="price">$<span>19</span></div>
        <p>Per month</p>
    </div>
    <ul>
        <li>Feature description</li>
        <li>Feature description</li>
        <li>Feature description</li>
        <li>Feature description</li>
        <li>Feature description</li>
        <li>Feature description</li>
        <li>Feature description</li>
    </ul>
    <div class="bottom-area">
        <a class="btn btn-sm" href="#">Order now</a>
    </div>
</div>

<div class="cnt-box cnt-call">
    <i class="im-paper-plane"></i>
    <div class="caption">
        <h2>Call to action</h2>
        <p>
            Lorem ipsum dolor sitamet consectetur adipisicing elito sed do eiusmod tempore.
        </p>
        <a href="#" class="btn btn-xs">Button</a>
    </div>
</div>

Installation

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

Settings

Name	Type	Description
Animations	Information	Go to the animation page for more details. Animations can be applied to images, texts and buttons.
Boxed	CSS	Add the class `boxed` to component to apply a boxed design. Try it Boxed design
Extra field	HTML	Add the code `<div class="extra-field">Text</div>` below the title to add a extra field to the component.
Content alignment	--	Add one of the following classes to the component to align the content: `align-center`,`align-right`,`align-left`. Try it Align center Align right Align left
Text size	CSS	Add the one of the following classes to change the text and title sizes: `text-xs`,`text-sm`,`text-md`,`text-lg`.
Buttons	Information	Go to the buttons page for more details.
Icons	Information	For the icons list and for more details visit the icons page.
Link	Information	Add the attribute `data-href="URL"` to the component to make the whole component clickable, use the attribute `data-target="_blank"` to open the link in a new window.
Big pricing table	CSS	Add the class `pricing-table-big` to the component to make the pricing table bigger.