Design That Works For You
Call Us Free: 1-800-555-5555

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 a sample of the ‘info’ style message box. To use this style use the following:
<div class="info"><div class="msg-box-icon">Your info message here…</div></div>
This is a sample of the ‘success’ style message box. To use this style use the following:
<div class="success"><div class="msg-box-icon">Your info message here…</div></div>
This is a sample of the ‘warning’ style message box. To use this style use the following:
<div class="warning"><div class="msg-box-icon">Your info message here…</div></div>
This is a sample of the ‘erroneous’ style message box. To use this style use the following:
<div class="erroneous"><div class="msg-box-icon">Your info message here…</div></div>
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-9"><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 shortcode:

Dark button example, view page source for the html code:
Read more...
Light button with right alignment example, view page source for the html code:
Looooooooooong button...
Small dark button example, view page source for the html code:
Read more...
Small light button with right alignment example, view page source for the html code:
Read more...

Sign Up Button

Sign Up button example:

Disclaimer

Important: This demo is purely for demonstration purposes and all the content are designed to showcase the QualiFire WP theme on a live site. All images are copyrighted to their respective owners.

Sign Up Today

Get the latest news and events by subscribing up for our newsletter