Buttons
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 ButtonToggles
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.
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.
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.
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.
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.
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
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
| 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.
Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
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