Typography
This is an H1 Header
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet odio quis sapien molestie ultrices.
This is an H2 Header
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet odio quis sapien molestie ultrices.
This is an H3 Header
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet odio quis sapien molestie ultrices.
This is an H4 Header
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet odio quis sapien molestie ultrices.
This is an H5 Header
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet odio quis sapien molestie ultrices.
This is an H6 Header
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet odio quis sapien molestie ultrices.
Message box styles:
This is an example of the 'preformatted' text.
To use this style use the following under HTML mode:
<pre>Your text goes here...</pre>
Blockquote styles:
This is an example of a blue ‘blockquote’ style. To use this style use the following under HTML mode: <blockquote class="blue">Your blockquote message goes here…</blockquote>
This is an example of a red ‘blockquote’ style. To use this style use the following under HTML mode: <blockquote class="red">Your blockquote message goes here…</blockquote>
This is an example of a green ‘blockquote’ style. To use this style use the following under HTML mode: <blockquote class="green">Your blockquote message goes here…</blockquote>
This is an example of a orange ‘blockquote’ style. To use this style use the following under HTML mode: <blockquote class="orange">Your blockquote message goes here…</blockquote>
This is an example of a grey ‘blockquote’ style. To use this style use the following under HTML mode: <blockquote class="grey">Your blockquote message goes here…</blockquote>
List styles:
To use the list styles below create a list in the following format: <ul class="class name"><li>….</li><li>….</li>…</ul>
- To apply this list style use: <ul class="list-1"><li>….</li><li>….</li>…</ul>.
- To apply this list style use: <ul class="list-2"><li>….</li><li>….</li>…</ul>.
- To apply this list style use: <ul class="list-3"><li>….</li><li>….</li>…</ul>.
- To apply this list style use: <ul class="list-4"><li>….</li><li>….</li>…</ul>.
- To apply this list style use: <ul class="list-5"><li>….</li><li>….</li>…</ul>.
- To apply this list style use: <ul class="list-6"><li>….</li><li>….</li>…</ul>.
- To apply this list style use: <ul class="list-7"><li>….</li><li>….</li>…</ul>.
- To apply this list style use: <ul class="list-8"><li>….</li><li>….</li>…</ul>.
- To apply this list style use: <ul class="list-8"><li>….</li><li>….</li>…</ul>.
Dropcaps:
You can generate a dropcap by using the following sintax: <span class="dropcap">A</span>, the result:
Aoccdrnig to rscheearch at an Elingsh uinervtisy, it deosn’t mttaer in waht
oredr the ltteers in a wrod are, olny taht the frist and lsat ltteres are at the
rghit pcleas. The rset can be a toatl mses and you can sitll raed it wouthit a
porbelm. Tihs is bcuseae we do not raed ervey lteter by ilstef, but the wrod as a
wlohe.
Expandable Button syntax:
You can generate a button by using the following html sintax:
<a class="custom-button" href="http://www.google.com/" title="Nice Button"><span>Read more...</span></a>
Result:
Here’s another example with longer text and the ‘title’ attribute ommitted, here’s the syntax:
<a class="white-button" href="http://www.google.com/"><span>Looooooooooong button...</span></a>
Result:
Divider Shortcodes
There are two types of dividers:
<div class="divider"></div>Will produce:
<div class="divider top-of-page"><a href="#top" title="Top of Page">Back to Top</a></div>
Will produce:
Pullquote & Blockquote styles:
This is a left pullquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit sed pharetra aliquet metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris metus tortor, commodo sit amet tempor id, gravida eget orci. In molestie feugiat nunc ac lobortis. Ut non nisi dolor, ac ultricies lorem. Vestibulum non lectus in arcu gravida malesuada. Curabitur sed sollicitudin mi. Aenean sit amet tortor ac arcu gravida rutrum eget ac dui. Phasellus rutrum dapibus nulla, a venenatis tortor eleifend vitae. Ut tincidunt vestibulum blandit. Nulla aliquet urna non enim convallis in vehicula mi scelerisque. Aliquam blandit imperdiet lorem eu ultrices. Nulla in dolor non ipsum fringilla sodales sed ac turpis. Nam nisi arcu, tincidunt sodales porta vel, ornare ac magna. Morbi in metus a felis accumsan interdum. Aliquam eros est, suscipit sit amet iaculis non, sagittis in lorem. Fusce bibendum sagittis sem, sit amet scelerisque tortor pharetra eu. Nullam facilisis ante vulputate metus accumsan lobortis.
This is a right pullquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit sed pharetra aliquet metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris metus tortor, commodo sit amet tempor id, gravida eget orci. In molestie feugiat nunc ac lobortis. Ut non nisi dolor, ac ultricies lorem. Vestibulum non lectus in arcu gravida malesuada. Curabitur sed sollicitudin mi. Aenean sit amet tortor ac arcu gravida rutrum eget ac dui. Phasellus rutrum dapibus nulla, a venenatis tortor eleifend vitae. Ut tincidunt vestibulum blandit. Nulla aliquet urna non enim convallis in vehicula mi scelerisque. Aliquam blandit imperdiet lorem eu ultrices. Nulla in dolor non ipsum fringilla sodales sed ac turpis. Nam nisi arcu, tincidunt sodales porta vel, ornare ac magna. Morbi in metus a felis accumsan interdum. Aliquam eros est, suscipit sit amet iaculis non, sagittis in lorem. Fusce bibendum sagittis sem, sit amet scelerisque tortor pharetra eu. Nullam facilisis ante vulputate metus accumsan lobortis.
This is an example of a ‘blockquote’. Aoccdrnig to rscheearch at an Elingsh uinervtisy, it deosn’t mttaer in waht oredr the ltteers in a wrod are, olny taht the frist and lsat ltteres are at the rghit pcleas. The rset can be a toatl mses and you can sitll raed it wouthit a porbelm. Tihs is bcuseae we do not raed ervey lteter by ilstef, but the wrod as a wlohe.
Recent Comments