HTML Elements

Buttons

Dark Button Grey Button Purple Button Blue Button Baby Blue Button Teal Button Red Button Pink Button Orange Button Green Button White Button

Code:
<a href="#" class="button small red">Small Button</a>

Class Size Options:
small, default, large, xlarge, full-width

Class Color Options:
black, grey, purple, blue, baby_blue, teal, red, pink, orange, green, white

To use the Pill or Square shape, include one of the following classes:
square, pill

Button Shape Options

Square Shape Button Default Shape Button Pill Shape Button

Framed Tabs

Open Tabs

Toggles

One thing that may be confusing about this section is distinguishing the difference between “Toggles” and an “Accordion” — So, let’s clear that up first. A toggle essentially allows you to hide a piece of content and let the user open and close it. You can stack many of these toggles in a row for a nice way of organizing content in your page or post. Then, in addition to that you can wrap your set of toggles with the “accordion” shortcode to group them together. This means that your set of toggles will now take on the traditional accordion concept of only allowing one toggle open at any given time.

Toggle 1

Nullam id dolor id nibh ultricies vehicula ut id elit. Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.

Toggle 2

Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam id dolor id nibh ultricies vehicula ut id elit.

single-toggle Code:

<div class="single-toggle">
	<div class="toggle-trigger"><a href="#" title="Title of Toggle">Toggle Title Click Me</a></div>
	<div class="toggle-content">
		<p>Your Content Goes here...</p>
	</div>
</div>

Accordions

Toggle 1

Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam id dolor id nibh ultricies vehicula ut id elit.

Toggle 2

Toggle 3

Accordion Toggle Code:

<div class="accordion-group">
	<div class="accordion-toggle">
		<div class="toggle-trigger"><a href="#" title="Title of Toggle">Toggle 2</a></div>
		<div class="toggle-content">
			<p>Your Content Goes here...</p>
		</div>
	</div>		
	<div class="accordion-toggle">
		<div class="toggle-trigger"><a href="#" title="Title of Toggle">Toggle 2</a></div>
		<div class="toggle-content">
			<p>Your Content Goes here...</p>
		</div>
	</div>
</div>

Tables

Table Caption
Header 1	Header 2	Header 3	Header 4
Table Footer
Item 1	Description	Subtotal:	$1.00
Item 2	Description	Discount:	$2.00
Item 3	Description	Shipping:	$3.00
Item 4	Description	Tax:	$4.00
All Items	Description	Total:	$10.00

Alert Messages

Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Code:
<div class="alert alert-warning">
    <p>......</p>
<div>

Class Options:
alert-warning, alert-error, alert-info, alert-success

Divider Shadow

Code:
<div class="divider-shadow"><div>

Horizontal Rule / Solid Line

Code:
<div class="divider-solid"></div>

Dashed Line

Code:
<div class="divider-dashed"></div>

Double Solid Line

Code:
<div class="divider-solid-double"></div>

Spacers

There is a spacing height of 80px between this paragraph line......

And this paragraph line.......

Code:
<div class="spacer80></div>

Options:
10, 20, 40, 60, 80