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:
Recent Comments