Features

Collection of predefined components to use on your siteBuild your custom pages with ease

Example I

  • Phasellus sit amet tristique tortor

    Donec posuere erat vel diam tincili porta. Nulla in venenatis magnara. Praesent aliquam lectus sit amet.

    Learn more
  • Etiam sem tortor scelerisque

    Vivamus interdum massa non ligis dignissim dictum. Vivamus ornare odio at libero imperdiet scelerisq.

    Learn more
  • Nunc auctor at dui sed vulputate

    Donec posuere risus vel quam ali convallis varius posuere metusas vehicula quisque adipiscing sit.

    Learn more
Hide code Show code
<ul class="template-feature-list template-feature-list-style-1 template-feature-list-large template-clear-fix template-layout-33x33x33">
	<li class="template-layout-column-left">
		<div>
			<div>
				<span class="template-feature-icon">
					<span class="template-icon-large template-icon-address"></span>
				</span>
				<h3><span>Phasellus sit</span> amet tristique tortor</h3>
				<p>Donec posuere erat vel diam tincili porta [...]</p>
				<a href="#">Learn more</a>
			</div>
		</div>
	</li>
	<li class="template-layout-column-center">
		<div>
			<div>
				<span class="template-feature-icon">
					<span class="template-icon-large template-icon-calendar"></span>
				</span>
				<h3><span>Etiam sem</span> tortor scelerisque</h3>
				<p>Vivamus interdum massa non ligis dignissim [...]</p>
				<a href="#">Learn more</a>
			</div>
		</div>
	</li>
	<li class="template-layout-column-right">
		<div>
			<div>
				<span class="template-feature-icon">
					<span class="template-icon-large template-icon-mail"></span>
				</span>
				<h3><span>Nunc auctor</span> at dui sed vulputate</h3>
				<p>Donec posuere risus vel quam ali convallis [...]</p>
				<a href="#">Learn more</a>
			</div>
		</div>
	</li>
</ul>

Example II

  • Morbi consectetur justo?

    Cras urna lacus fringilla non congue ut fermentum at nunc.

    Learn more
  • Sed a nulla volutpat?

    Curabitur eu eros vel nisl congue pellentesque quis nec erat lore.

    Learn more
  • Maecenas turpis enim?

    Praesent vehicula magna ac bibendum pulvinar mauris dui.

    Learn more
Hide code Show code
<ul class="template-feature-list template-feature-list-style-1 template-feature-list-medium template-clear-fix template-layout-33x33x33">
	<li class="template-layout-column-left">
		<div>
			<div>
				<span class="template-feature-icon">
					<span class="template-icon-small template-icon-battery-full"></span>
				</span>
				<h4>Morbi consectetur justo?</h4>
				<p>Cras urna lacus fringilla non [...]</p>
				<a href="#">Learn more</a>
			</div>
		</div>
	</li>
	<li class="template-layout-column-center">
		<div>
			<div>
				<span class="template-feature-icon">
					<span class="template-icon-small template-icon-binoculars"></span>
				</span>
				<h4> Sed a nulla volutpat?</h4>
				<p>Curabitur eu eros vel nisl congue [...]</p>
				<a href="#">Learn more</a>
			</div>
		</div>
	</li>
	<li class="template-layout-column-right">
		<div>
			<div>
				<span class="template-feature-icon">
					<span class="template-icon-small template-icon-bookmark"></span>
				</span>
				<h4>Maecenas turpis enim?</h4>
				<p>Praesent vehicula magna ac bibendum [...]</p>
				<a href="#">Learn more</a>
			</div>
		</div>
	</li>
</ul>

Example III

  • Etiam rutrum?

    Nam sollicitudin bibendum antes.

    Learn more
  • Proin volutpat?

    Vivamus id metu a nisi rhoncus as.

    Learn more
  • Mauris pretium?

    Sed vel tortor egi dolor accumsani.

    Learn more
  • Curabitur eu?

    Praesent vitae an non nisi tempori.

    Learn more
Hide code Show code
<ul class="template-feature-list template-feature-list-style-1 template-feature-list-small template-clear-fix template-layout-25x25x25x25">
	<li class="template-layout-column-left">
		<div>
			<div>
				<span class="template-feature-icon">
					<span class="template-icon-small template-icon-chat"></span>
				</span>
				<h6>Etiam rutrum?</h6>
				<p>Nam sollicitudin bibendum antes.</p>
				<a href="#">Learn more</a>
			</div>
		</div>
	</li>
	<li class="template-layout-column-center-left">
		<div>
			<div>
				<span class="template-feature-icon">
					<span class="template-icon-small template-icon-clock"></span>
				</span>
				<h6>Proin volutpat?</h6>
				<p>Vivamus id metu a nisi rhoncus as.</p>
				<a href="#">Learn more</a>
			</div>
		</div>
	</li>
	<li class="template-layout-column-center-right">
		<div>
			<div>
				<span class="template-feature-icon">
					<span class="template-icon-small template-icon-config"></span>
				</span>
				<h6>Mauris pretium?</h6>
				<p>Sed vel tortor egi dolor accumsani.</p>
				<a href="#">Learn more</a>
			</div>
		</div>
	</li>
	<li class="template-layout-column-right">
		<div>
			<div>
				<span class="template-feature-icon">
					<span class="template-icon-small template-icon-cross"></span>
				</span>
				<h6>Curabitur eu?</h6>
				<p>Praesent vitae an non nisi tempori.</p>
				<a href="#">Learn more</a>
			</div>
		</div>
	</li>
</ul>

Example I

Hide code Show code
<ul class="template-feature-list template-feature-list-style-2 template-feature-list-large template-clear-fix template-layout-33x33x33">
	<li class="template-layout-column-left">
		<div>
			<div>
				<span class="template-feature-icon">
					<span class="template-icon-large template-icon-address"></span>
				</span>
				<h3><span>Phasellus sit</span> amet tristique tortor</h3>
				<p>Donec posuere erat vel diam tincili porta [...]</p>
				<a href="#">Learn more</a>
			</div>
		</div>
	</li>
	<li class="template-layout-column-center">
		<div>
			<div>
				<span class="template-feature-icon">
					<span class="template-icon-large template-icon-calendar"></span>
				</span>
				<h3><span>Etiam sem</span> tortor scelerisque</h3>
				<p>Vivamus interdum massa non ligis dignissim [...]</p>
				<a href="#">Learn more</a>
			</div>
		</div>
	</li>
	<li class="template-layout-column-right">
		<div>
			<div>
				<span class="template-feature-icon">
					<span class="template-icon-large template-icon-mail"></span>
				</span>
				<h3><span>Nunc auctor</span> at dui sed vulputate</h3>
				<p>Donec posuere risus vel quam ali convallis [...]</p>
				<a href="#">Learn more</a>
			</div>
		</div>
	</li>
</ul>

Example II

Hide code Show code
<ul class="template-feature-list template-feature-list-style-2 template-feature-list-medium template-clear-fix template-layout-33x33x33">
	<li class="template-layout-column-left">
		<div>
			<div>
				<span class="template-feature-icon">
					<span class="template-icon-small template-icon-battery-full"></span>
				</span>
				<h4>Morbi consectetur justo?</h4>
				<p>Cras urna lacus fringilla non [...]</p>
				<a href="#">Learn more</a>
			</div>
		</div>
	</li>
	<li class="template-layout-column-center">
		<div>
			<div>
				<span class="template-feature-icon">
					<span class="template-icon-small template-icon-binoculars"></span>
				</span>
				<h4> Sed a nulla volutpat?</h4>
				<p>Curabitur eu eros vel nisl congue [...]</p>
				<a href="#">Learn more</a>
			</div>
		</div>
	</li>
	<li class="template-layout-column-right">
		<div>
			<div>
				<span class="template-feature-icon">
					<span class="template-icon-small template-icon-bookmark"></span>
				</span>
				<h4>Maecenas turpis enim?</h4>
				<p>Praesent vehicula magna ac bibendum [...]</p>
				<a href="#">Learn more</a>
			</div>
		</div>
	</li>
</ul>

Example III

Hide code Show code
<ul class="template-feature-list template-feature-list-style-2 template-feature-list-small template-clear-fix template-layout-25x25x25x25">
	<li class="template-layout-column-left">
		<div>
			<div>
				<span class="template-feature-icon">
					<span class="template-icon-small template-icon-chat"></span>
				</span>
				<h6>Etiam rutrum?</h6>
				<p>Nam sollicitudin bibendum antes.</p>
				<a href="#">Learn more</a>
			</div>
		</div>
	</li>
	<li class="template-layout-column-center-left">
		<div>
			<div>
				<span class="template-feature-icon">
					<span class="template-icon-small template-icon-clock"></span>
				</span>
				<h6>Proin volutpat?</h6>
				<p>Vivamus id metu a nisi rhoncus as.</p>
				<a href="#">Learn more</a>
			</div>
		</div>
	</li>
	<li class="template-layout-column-center-right">
		<div>
			<div>
				<span class="template-feature-icon">
					<span class="template-icon-small template-icon-config"></span>
				</span>
				<h6>Mauris pretium?</h6>
				<p>Sed vel tortor egi dolor accumsani.</p>
				<a href="#">Learn more</a>
			</div>
		</div>
	</li>
	<li class="template-layout-column-right">
		<div>
			<div>
				<span class="template-feature-icon">
					<span class="template-icon-small template-icon-cross"></span>
				</span>
				<h6>Curabitur eu?</h6>
				<p>Praesent vitae an non nisi tempori.</p>
				<a href="#">Learn more</a>
			</div>
		</div>
	</li>
</ul>