Boxes and elements

Add some spice to your content.

Content boxes

Box content 1 - with header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.

<div class="content-box header-box box-1 round-3">
    <div class="box_head">Box header text</div>
    <p>Box Content</p>

</div>

Box content 1 - without header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.

<div class="content-box box-1 round-3">
    <p>Box Content</p>
</div>

Box content 2 - with header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.

<div class="content-box header-box box-2 round-3">
    <div class="box_head">Box header text</div>
    <p>Box Content</p>
</div>

Box content 2 - without header

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.

<div class="content-box box-2 round-3">
    <p>Box Content</p>
</div>

Messages boxes

<div class="[box-info, box-success, box-warning, box-error] round-3">
    <div class="box-content">
        <p>Box Content</p>
    </div>
</div>

Information box

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.

Success box

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.

Warning box

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.

Error box

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.


Rounded borders

Round border 3px

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.

<div class="round-3">Content</div>

* In example also used .content-box .box-1 classes

Round border 5px

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.

<div class="round-5">Content</div>

* In example also used .content-box .box-1 classes

Round border 10px

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.

<div class="round-10">Content</div>

* In example also used .content-box .box-1 classes

Contacts

  • 123 Main Street Los Angeles, CA, 94101
  • Phone:+1 123-23-123
  • Fax:+1 123-23-123

Image Gallery

Recent Tweets

Feedback