Documentation

List Styles

  • Suspendisse a amet enim congue accumsan.
  • Integer aliquam suscipit tellus sagittis in.
  • Pellentesque sem elementum ornare.
  • Sed vel ante sit amet ipsum molestie adipiscing.
<ul class="fa-ul">
	<li><i class="fa-li fa fa-angle-double-right"></i>Suspendisse a amet enim congue accumsan.</li>
	<li><i class="fa-li fa fa-angle-double-right"></i>Integer aliquam suscipit tellus sagittis in.</li>
	<li><i class="fa-li fa fa-angle-double-right"></i>Pellentesque sem elementum ornare.</li>
	<li><i class="fa-li fa fa-angle-double-right"></i>Sed vel ante sit amet ipsum molestie adipiscing.</li>
</ul>
  • Suspendisse a amet enim congue accumsan.
  • Integer aliquam suscipit tellus sagittis in.
  • Pellentesque sem elementum ornare.
  • Sed vel ante sit amet ipsum molestie adipiscing.
<ul class="fa-ul">
	<li><i class="fa-li fa fa-hand-o-right"></i>Suspendisse a amet enim congue accumsan.</li>
	<li><i class="fa-li fa fa-hand-o-right"></i>Integer aliquam suscipit tellus sagittis in.</li>
	<li><i class="fa-li fa fa-hand-o-right"></i>Pellentesque sem elementum ornare.</li>
	<li><i class="fa-li fa fa-hand-o-right"></i>Sed vel ante sit amet ipsum molestie adipiscing.</li>
</ul>

Breaking Line

<div class="breaking-line"></div>
<div class="clear-float do-the-split"></div>

Caption Image

Ad assum tibique eum, sed diam scripta eruditi in.

<div class="wp-caption aligncenter">
	<a href="/assets/images/photos/image-29.jpg"><img alt="" src="/assets/images/photos/image-3.jpg"></a>
	<p class="wp-caption-text">Ad assum tibique eum, sed diam scripta eruditi in.</p>
</div>

Button

<div class="split">
	<div class="size3">
		<p><a href="#" class="button">Button</a></p>
		<p><a href="#" class="button big-size">Button</a></p>
	</div>
	<div class="size3">
		<p><a href="#" class="button" style="background-color: #B1221C;">Button</a></p>
		<p><a href="#" class="button big-size" style="background-color: #B1221C;">Button</a></p>
	</div>
	<div class="size3">
		<p><a href="#" class="button" style="background-color: #519623;">Button</a></p>
		<p><a href="#" class="button big-size" style="background-color: #519623;">Button</a></p>
	</div>
	<div class="size3">
		<p><a href="#" class="button" style="background-color: #DB6D1D;">Button</a></p>
		<p><a href="#" class="button big-size" style="background-color: #DB6D1D;">Button</a></p>
	</div>
</div>
<div class="photo-gallery-shortcode">
	<div class="thumbs-block">
		<a href="#"><img src="/assets/images/photos/image-61.jpg" alt="" /></a>
		<a href="#"><img src="/assets/images/photos/image-62.jpg" alt="" /></a>
		<a href="#"><img src="/assets/images/photos/image-63.jpg" alt="" /></a>
		<a href="#"><img src="/assets/images/photos/image-64.jpg" alt="" /></a>
		<a href="http://lofter.flinhong.com/"><i class="fa fa-camera"></i><span>View galery</span></a>
	</div>
	<a href="#"><img src="/assets/images/photos/image-60.jpg" alt="" title="" /></a>
</div>

Info Messages

Information:Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

Success:Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

Error:Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.

<div class="info-message">
	<a href="#" class="close-info"><i class="fa fa-times"></i></a>
	<p><strong>Information:</strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
</div>

<div class="info-message" style="background-color: #75a226;">
	<a href="#" class="close-info"><i class="fa fa-times"></i></a>
	<p><strong>Success:</strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
</div>

<div class="info-message" style="background-color: #a24026;">
	<a href="#" class="close-info"><i class="fa fa-times"></i></a>
	<p><strong>Error:</strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
</div>

Accordion

Ut enim ad minim veniam, quis nostrud exercitation ullamco quat.

Quisque non quam tortor. Vestibulum fermentum pulvinar tempor. Donec tincidunt molest. Nam vel leo orci. Donec endrerit scelerisque quam sem eu ipsum. Nam lacus enim, porta. Cu quot salutatus aliquando pri, iudico scriptorem reprehendunt ad sit.

Enim tota per in. Vim viris liberavisse te, nec te ipsum ullum ignota.

Quisque non quam tortor. Vestibulum fermentum pulvinar tempor. Donec tincidunt molest. Nam vel leo orci. Donec endrerit scelerisque quam sem eu ipsum. Nam lacus enim, porta. Cu quot salutatus aliquando pri, iudico scriptorem reprehendunt ad sit.

Nam nostrud nusquam recteque ei, te aeterno nusquam vis cu epicuri.

Quisque non quam tortor. Vestibulum fermentum pulvinar tempor. Donec tincidunt molest. Nam vel leo orci. Donec endrerit scelerisque quam sem eu ipsum. Nam lacus enim, porta. Cu quot salutatus aliquando pri, iudico scriptorem reprehendunt ad sit.

<div class="accordion">
	<div class="accordion-tab active">
		<a href="#">Ut enim ad minim veniam, quis nostrud exercitation ullamco quat.</a>
		<div class="accordion-block">
			<p>Quisque non quam tortor. Vestibulum fermentum pulvinar tempor. Donec tincidunt molest. Nam vel leo orci. Donec endrerit scelerisque quam sem eu ipsum. Nam lacus enim, porta. Cu quot salutatus aliquando pri, iudico scriptorem reprehendunt ad sit.</p>
		</div>
	</div>
	<div class="accordion-tab">
		<a href="#">Enim tota per in. Vim viris liberavisse te, nec te ipsum ullum ignota.</a>
		<div class="accordion-block">
			<p>Quisque non quam tortor. Vestibulum fermentum pulvinar tempor. Donec tincidunt molest. Nam vel leo orci. Donec endrerit scelerisque quam sem eu ipsum. Nam lacus enim, porta. Cu quot salutatus aliquando pri, iudico scriptorem reprehendunt ad sit.</p>
		</div>
	</div>
	<div class="accordion-tab">
		<a href="#">Nam nostrud nusquam recteque ei, te aeterno nusquam vis cu epicuri.</a>
		<div class="accordion-block">
			<p>Quisque non quam tortor. Vestibulum fermentum pulvinar tempor. Donec tincidunt molest. Nam vel leo orci. Donec endrerit scelerisque quam sem eu ipsum. Nam lacus enim, porta. Cu quot salutatus aliquando pri, iudico scriptorem reprehendunt ad sit.</p>
		</div>
	</div>
</div>