Gallery

<gallery cols="4">
	<gallery-filters>
		<gallery-filter name="All" code="all"/>
		<gallery-filter name="Filter A" code="filter_a"/>
	</gallery-filters>
	<gallery-images>
		<gallery-image filter="filter_a" icon="/img/gallery/thumbs/image-01.jpg" text="..." src="/img/gallery/full/image-01-full.jpg" title="The City"/>
		<gallery-image filter="filter_a" icon="/img/gallery/thumbs/image-02.jpg" text="..." src="/img/gallery/full/image-02-full.jpg" title="The City"/>
		<gallery-image filter="filter_a" icon="/img/gallery/thumbs/image-03.jpg" text="..." src="/img/gallery/full/image-03-full.jpg" title="The City"/>
		<gallery-image icon="/img/gallery/thumbs/image-04.jpg" text="..." src="/img/gallery/full/image-04-full.jpg" title="The City"/>
		<gallery-image icon="/img/gallery/thumbs/image-05.jpg" text="..." src="/img/gallery/full/image-05-full.jpg" title="The City"/>
		<gallery-image filter="filter_a" icon="/img/gallery/thumbs/image-06.jpg" text="..." src="/img/gallery/full/image-06-full.jpg" title="The City"/>
		<gallery-image icon="/img/gallery/thumbs/image-07.jpg" text="..." src="/img/gallery/full/image-07-full.jpg" title="The City"/>
		<gallery-image filter="filter_a" icon="/img/gallery/thumbs/image-08.jpg" text="..." src="/img/gallery/full/image-08-full.jpg" title="The City"/>
	</gallery-images>
</gallery>

Carousel

<carousel>
	<carousel-item>
		<a href="#"><image src="/img/gallery/thumbs/image-01.jpg"/></a>
	</carousel-item> 
	<carousel-item>
		<a href="#"><image src="/img/gallery/thumbs/image-02.jpg"/></a>
	</carousel-item> 
	<carousel-item>
		<a href="#"><image src="/img/gallery/thumbs/image-03.jpg"/></a>
	</carousel-item> 
</carousel>

Nivo

Slide 1

Augue iriure dolorum per ex, ne iisque ornatus veritus duo.

Read more

Slide 2

Augue iriure dolorum per ex, ne iisque ornatus veritus duo.

Read more

Slide 3

Augue iriure dolorum per ex, ne iisque ornatus veritus duo.

Read more

<nivo-slider>
	<nivo-slider-item link="#" image="/img/slides/nivo/bg-1.jpg" title="Slide 1">
		...
	</nivo-slider-item>
	<nivo-slider-item link="#" image="/img/slides/nivo/bg-2.jpg" title="Slide 2">
		...
	</nivo-slider-item>
	<nivo-slider-item link="#" image="/img/slides/nivo/bg-3.jpg" title="Slide 3">
		...
	</nivo-slider-item>
</nivo-slider>

Button types

<button label="btn default" />
<button label="btn primary" style="primary"/>
<button label="btn secondary"  style="secondary"/>
<button label="btn success"  style="success"/>
<button label="btn danger"  style="danger"/>
<button label="btn warning"  style="warning"/>
<button label="btn info"  style="info"/>
<button label="btn light"  style="light"/>
<button label="btn dark"  style="dark"/>
<button label="btn link"  style="link"/>
<button label="btn outline" outline="true"/>

Button with icon

You can add icon to any choosen buttons. See some example below:

<button label="button icon heart" style="success" size="sm" icon="heart" />
<button label=" button icon camera" style="red" size="sm" icon="camera" />
<button label="button icon briefcase" size="sm" outline="true" icon="briefcase"/>

More variations

Wrap a series of buttons with <ec:button-group/>

<button label="primary" style="primary"/>
<button label="success" style="success"/>
<button label="warning" style="warning"/>

Button sizes

There are 5 button sizes: lg and sm.

<button label="Large button" size="lg"/>
<button label="Small button" size="sm" style="success"/>
<button label="btn block level" block="true" style="warning"/>

• One
• two
• three

<tabs>
	<tabs-item active="true" icon="briefcase" title="One">
        <p><strong>Augue iriure</strong> dolorum per ex, ne iisque ornatus veritus duo. Ex nobis integre 
        lucilius sit, pri ea falli ludus appareat. Eum quodsi fuisset id, nostro patrioque qui id. Nominati 
        eloquentiam in mea.</p>
        <p>No eum sanctus vituperata reformidans, dicant abhorreant ut pro. Duo id enim iisque praesent, 
        amet intellegat per et, solet referrentur eum et.</p>
	</tabs-item>
	<tabs-item title="two">
		<p>Tale dolor mea ex, te enim assum suscipit cum, vix aliquid omittantur in. Duo eu cibo dolorum 
		menandri, nam sumo dicit admodum ei. Ne mazim commune honestatis cum, mentitum phaedrum sit et.</p>
	</tabs-item>
	<tabs-item title="three">
       	<p>Cu cum commodo regione definiebas. Cum ea eros laboramus, audire deseruisse his at, munere 
       	aeterno ut quo. Et ius doming causae philosophia, vitae bonorum intellegat usu cu.</p>
	</tabs-item>
</tabs>

Accordion

<accordion>
	<accordion-item title="one">
	     <p><strong>Augue iriure</strong> dolorum per ex, ne iisque ornatus veritus duo. Ex nobis integre 
	     lucilius sit, pri ea falli ludus appareat. Eum quodsi fuisset id, nostro patrioque qui id. Nominati 
	     eloquentiam in mea.</p>
	     <p>No eum sanctus vituperata reformidans, dicant abhorreant ut pro. Duo id enim iisque praesent, 
	     amet intellegat per et, solet referrentur eum et.</p>
	</accordion-item>
	<accordion-item title="two">
	     <p>Tale dolor mea ex, te enim assum suscipit cum, vix aliquid omittantur in. Duo eu cibo dolorum menandri, 
	     nam sumo dicit admodum ei. Ne mazim commune honestatis cum, mentitum phaedrum sit et.</p>
	</accordion-item>
	<accordion-item title="three">
	     <p>Cu cum commodo regione definiebas. Cum ea eros laboramus, audire deseruisse his at, munere aeterno ut 
	     quo. Et ius doming causae philosophia, vitae bonorum intellegat usu cu.</p>
	</accordion-item>
</accordion>

Event

<button label="btn default">
	<event type="click">
		alert("click");
	</event>
</button>

Alerts

<alert>
	<strong>Warning!</strong> Best check yo self, you're not looking too good.
</alert>
<alert style="error">
	<strong>Error!</strong> Best check yo self, you're not looking too good.
</alert>
<alert style="success">
	<strong>Success</strong> Best check yo self, you're not looking too good.
</alert>
<alert style="info">
	<strong>Info!</strong> Best check yo self, you're not looking too good.
</alert>

Testimonial

There are many variations of passages of randomised words which don't look even slightly believable. You need to be sure there isn't anything embarrassing of text.

Testimonial name

<testimonial name="Testimonial name" image="/img/user.png">
	There are many variations of passages of randomised words which don't look even slightly 
	believable. You need to be sure there isn't anything embarrassing of text.
	<testimonial-info>
		Name, <a href="#">www.sitename.com</a>
	</testimonial-info>
</testimonial>