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

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

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

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

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

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

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

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

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

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
1

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
2

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
Extra

Content box

Informationvalue
Informationvalue
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
Informationvalue
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

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.

Button

01 JAN 2018

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.

Button

01 JAN 2018

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.

Button
01 JAN 2018

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
01 JAN 2018

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

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

Plan name

$19

Per month

  • Feature description
  • Feature description
  • Feature description
  • Feature description
  • Feature description
  • Feature description
  • Feature description

Plan name

$19

Per month

  • Feature description
  • Feature description
  • Feature description
  • Feature description
  • Feature description
  • Feature description
  • Feature description

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.
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.