<div class="typo-title">
    Headings
  </div>

  <h1>Heading one example</h1>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
  do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
  enim ad minim veniam, quis nostrud exercitation ullamco laboris
  nisi ut aliquip ex ea commodo consequat.</p>

  <h2>Heading two example</h2>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
  do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
  enim ad minim veniam, quis nostrud exercitation ullamco laboris
  nisi ut aliquip ex ea commodo consequat.</p>

  <h3>Heading three example</h3>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
  do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
  enim ad minim veniam, quis nostrud exercitation ullamco laboris
  nisi ut aliquip ex ea commodo consequat.</p>

  <h4>Heading four example</h4>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
  do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
  enim ad minim veniam, quis nostrud exercitation ullamco laboris
  nisi ut aliquip ex ea commodo consequat.</p>

  <h5>Heading five example</h5>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
  do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
  enim ad minim veniam, quis nostrud exercitation ullamco laboris
  nisi ut aliquip ex ea commodo consequat.</p>

  <h6>Heading six example</h6>

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
  do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
  enim ad minim veniam, quis nostrud exercitation ullamco laboris
  nisi ut aliquip ex ea commodo consequat.<br />
  <br />
  &nbsp;</p>

  <div class="typo-title">
    Normal Paragraph of text
  </div>

  <p>This is a Normal paragraph of text created with lorem ipsum
  text. Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation
  ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href=
  "#">This is a link in normal paragraph text</a> Duis aute irure
  dolor in reprehenderit in voluptate velit esse cillum dolore eu
  fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est
  laborum."</p>

  <p><br />
  &nbsp;</p>

  <div class="typo-title">
    Special Tags
  </div>

  <blockquote>
    This is a blocquote tag example created with lorem ipsum text.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
    do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat.
  </blockquote>
  <pre>
  <strong>This is pre tag example:</strong>

  body {
    font-family:Arial,Helvetica,Verdana,"Bitstream Vera Sans",sans-serif;
    font-size:81.25%;
    line-height:150%;
    color:#252525;
    background:#ffffff;
  }
  
</pre>

  <p><code><strong>This is code tag example:</strong><br />
  body {<br />
  &nbsp;&nbsp;font-family:Arial,Helvetica,Verdana,"Bitstream Vera
  Sans",sans-serif;<br />
  &nbsp;&nbsp;font-size:81.25%;<br />
  &nbsp;&nbsp;line-height:150%;<br />
  &nbsp; color:#252525;<br />
  &nbsp;&nbsp;background:#ffffff;<br />
  }</code></p>

  <p><br />
  &nbsp;</p>

  <div class="typo-title">
    List Styles
  </div>

  <div class="clearfix">
    <div style="float: left; width: 48%; padding-right: 1%;">
      <ol>
        <li>This is a sample <strong>Ordered List
        Style</strong>.</li>

        <li>In order to use it, simply use:-</li>

        <li><strong>&lt;ul&gt;&lt;li&gt;.. Your text goes here
        ..&lt;/li&gt;&lt;/ul&gt;</strong></li>
      </ol>

      <ul class="arrow-list">
        <li>This is a sample <strong>Arrow List
        Style</strong>.</li>

        <li>In order to use it, simply use:-</li>

        <li><strong>&lt;ul class="arrow-list"&gt;&lt;li&gt;.. your
        text goes here ..&lt;/li&gt;</strong></li>

        <li>and make your listing looking beautiful.</li>
      </ul>
    </div>

    <div style="float: left; width: 48%; padding-right: 1%;">
      <ul>
        <li>This is a sample <strong>Unordered List
        Style</strong>.</li>

        <li>In order to use it, simply use:-</li>

        <li><strong>&lt;ol&gt;&lt;li&gt;.. Your text goes here
        ..&lt;/li&gt;&lt;/ol&gt;</strong></li>
      </ul>

      <ul class="star-list">
        <li>This is a sample <strong>Star List Style</strong>.</li>

        <li>In order to use it, simply use:-</li>

        <li><strong>&lt;ul class="star-list"&gt;&lt;li&gt;.. your
        text goes here ..&lt;/li&gt;</strong></li>

        <li>and make your listing looking beautiful.</li>
      </ul>
    </div>

    <div style="float: left; width: 48%; padding-right: 1%;">
      <ul class="check-list">
        <li>This is a sample <strong>Check List
        Style</strong>.</li>

        <li>In order to use it, simply use:-</li>

        <li><strong>&lt;ul class="check-list"&gt;&lt;li&gt;.. your
        text goes here ..&lt;/li&gt;</strong></li>

        <li>and make your listing looking beautiful.</li>
      </ul>
    </div>
  </div>

  <p><br />
  &nbsp;</p>

  <div class="typo-title">
    Special Messaging Box styles
  </div>

  <div class="status-box">
    Status Message Box: Use <strong>&lt;div
    class="status-box"&gt;.. Your text goes here
    ..&lt;/div&gt;</strong> to create this.
  </div>

  <div class="warning-box">
    Warning Message Box: <strong>Use &lt;div
    class="warning-box"&gt;.. Your text goes here
    ..&lt;/div&gt;</strong> to create this.
  </div>

  <div class="error-box">
    Error Message Box: <strong>Use &lt;div class="warning"&gt;..
    Your text goes here ..&lt;/div&gt;</strong> to create this.
  </div>

  <div class="info-box">
    Info Message Box:. Use <strong>&lt;div class="info-box"&gt;..
    Your text goes here ..&lt;/div&gt;</strong> to create this.
  </div>

  <p><br />
  &nbsp;</p>

  <div class="typo-title">
    Special Buttons Styles
  </div>

  <p style="margin:0px">Use <strong>small medium large</strong>
  class respectively for example for small use small i.e.: -<br />
  <strong>&lt;a href="#" class="button blue
  small"&gt;&lt;span&gt;Some
  Text&lt;/span&gt;&lt;/a&gt;</strong></p>

  <p style="margin-bottom:0px"><a class="button black small" href=
  "#"><span>Some Text</span></a> <a class="button black medium"
  href="#"><span>Some Text</span></a> <a class="button black large"
  href="#"><span>Some Text</span></a></p>

  <p style="margin-bottom:0px">Use <strong>&lt;a href="#"
  _cke_saved_href="#" class="button blue small"&gt;&lt;span&gt;Some
  Text&lt;/span&gt;&lt;/a&gt;</strong></p>

  <p><a class="button cyan" href="#"><span>Cyan</span></a>
  <a class="button blue" href="#"><span>Blue</span></a> <a class=
  "button green" href="#"><span>Green</span></a> <a class=
  "button orange" href="#"><span>Orange</span></a> <a class=
  "button pink" href="#"><span>Pink</span></a> <a class=
  "button purple" href="#"><span>Purple</span></a> <a class=
  "button red" href="#"><span>Red</span></a> <a class=
  "button yellow" href="#"><span>Yellow</span></a> <a class=
  "button white" href="#"><span>White</span></a> <a class=
  "button gray" href="#"><span>Gray</span></a> <a class=
  "button black" href="#"><span>Black</span></a></p>

  <p><br />
  &nbsp;</p>

  <div class="typo-title">
    More Paragraph Styles
  </div>

  <div style="width: 47%; float: left; margin-right: 2.5%;">
    <p class="download">Downlod: Use <strong>&lt;p
    class="download"&gt;.. Your text goes here
    ..&lt;/p&gt;</strong> to create this.</p>

    <p class="upload">Upload: Use <strong>&lt;p
    class="upload"&gt;.. Your text goes here ..&lt;/p&gt;</strong>
    to create this.</p>

    <p class="note">Note: Use <strong>&lt;p class="note"&gt;.. Your
    text goes here ..&lt;/p&gt;</strong> to create this.</p>

    <p class="tip">Tip: Use <strong>&lt;p class="tip"&gt;.. Your
    text goes here ..&lt;/p&gt;</strong> to create this.</p>

    <p class="word">Word: Use <strong>&lt;p class="word"&gt;.. Your
    text goes here ..&lt;/p&gt;</strong> to create this.</p>

    <p class="excel">Excel: Use <strong>&lt;p class="excel"&gt;..
    Your text goes here ..&lt;/p&gt;</strong> to create this.</p>

    <p class="pdf">Pdf: Use <strong>&lt;p class="pdf"&gt;.. Your
    text goes here ..&lt;/p&gt;</strong> to create this.</p>

    <p class="compressed">Compressed: Use <strong>&lt;p
    class="compressed"&gt;.. Your text goes here
    ..&lt;/p&gt;</strong> to create this.</p>

    <p class="user">User: Use <strong>&lt;p class="user"&gt;.. Your
    text goes here ..&lt;/p&gt;</strong> to create this.</p>

    <p class="comment">Comment: Use <strong>&lt;p
    class="comment"&gt;.. Your text goes here ..&lt;/p&gt;</strong>
    to create this.</p>

    <p class="alert">Alert: Use <strong>&lt;p class="alert"&gt;..
    Your text goes here ..&lt;/p&gt;</strong> to create this.</p>

    <p class="info">Info: Use <strong>&lt;p class="info"&gt;.. Your
    text goes here ..&lt;/p&gt;</strong> to create this.</p>
  </div>

  <div style="width: 47%; float: left; margin-right: 2.5%;">
    <p class="check">Check: Use <strong>&lt;p class="check"&gt;..
    Your text goes here ..&lt;/p&gt;</strong> to create this.</p>

    <p class="arrow">Arrow: Use <strong>&lt;p class="arrow"&gt;..
    Your text goes here ..&lt;/p&gt;</strong> to create this.</p>

    <p class="star">Star: Use <strong>&lt;p class="star"&gt;.. Your
    text goes here ..&lt;/p&gt;</strong> to create this.</p>

    <p class="email">Email: Use <strong>&lt;p class="email"&gt;..
    Your text goes here ..&lt;/p&gt;</strong> to create this.</p>

    <p class="mobile">Mobile: Use <strong>&lt;p
    class="mobile"&gt;.. Your text goes here ..&lt;/p&gt;</strong>
    to create this.</p>

    <p class="tag">Tag: Use <strong>&lt;p class="tag"&gt;.. Your
    text goes here ..&lt;/p&gt;</strong> to create this.</p>

    <p class="cart">Cart: Use <strong>&lt;p class="cart"&gt;.. Your
    text goes here ..&lt;/p&gt;</strong> to create this.</p>

    <p class="home">Home: Use <strong>&lt;p class="home"&gt;.. Your
    text goes here ..&lt;/p&gt;</strong> to create this.</p>

    <p class="key">Key: Use <strong>&lt;p class="key"&gt;.. Your
    text goes here ..&lt;/p&gt;</strong> to create this.</p>

    <p class="lock">Lock: Use <strong>&lt;p class="lock"&gt;.. Your
    text goes here ..&lt;/p&gt;</strong> to create this.</p>

    <p class="image">Image: Use <strong>&lt;p class="image"&gt;..
    Your text goes here ..&lt;/p&gt;</strong> to create this.</p>

    <p class="video">Video: Use <strong>&lt;p class="video"&gt;..
    Your text goes here ..&lt;/p&gt;</strong> to create this.</p>
  </div>

  <div class="clearfix" style="clear:both;">
    <p>&nbsp;</p>
  </div>

Styleguide Placeholder HTML

HTML