//tile
<section class="tile">

//tile header
<div class="tile-header">
  <h1><strong>Text</strong> Emphasis</h1>
  <div class="controls">
    <a href="#"><i class="fa fa-refresh"></i></a>
    <a href="#"><i class="fa fa-times"></i></a>
  </div>
</div>
// /tile header

//tile body
<div class="tile-body">
                    
  //De-Emphasizing
  <h4 class="filled">De-Emphasizing</h4>
  <p class="filled">
    <small>This line of text is meant to be treated as fine print.</small>
  </p>

  //Bold
  <h4 class="filled">Bold</h4>
  <p class="filled">
    The following snippet of text is <strong>rendered as bold text</strong>.
  </p>

  //Italics
  <h4 class="filled">Italics</h4>
  <p class="filled">
    The following snippet of text is <em>rendered as italicized text</em>.
  </p>  

  <h4>Emhasis Classes</h4> 
  //Muted text
  <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>

  //Red text
  <p class="red-text">Etiam porta sem malesuada magna mollis euismod.</p>

  //Cyan text
  <p class="cyan-text">Donec ullamcorper nulla non metus auctor fringilla.</p>

  //Green text
  <p class="green-text">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>

  //Orange text
  <p class="orange-text">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

  //Amethyst text
  <p class="amethyst-text">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

  //Thin text
  <p class="thin">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>

  //Uppercased text
  <p class="uppercase">Etiam porta sem malesuada magna mollis euismod.</p>

  //Italics text
  <p class="italic">Donec ullamcorper nulla non metus auctor fringilla.</p>

  //Extra-bold text
  <p class="extra-bold">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p> 

</div>
// /tile body

</section>
// /tile

//tile
<section class="tile">

//tile header
<div class="tile-header">
  <h1>Abbreviations</h1>
  <div class="controls">
    <a href="#"><i class="fa fa-refresh"></i></a>
    <a href="#"><i class="fa fa-times"></i></a>
  </div>
</div>
// /tile header

//tile body
<div class="tile-body">
                    
  //Default Abbreviation
  <h5>Default Abbreviation</h5>
  <div class="well">An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</div>

  //Little Smaller Text Abbreviation
  <h5>Little Smaller Text Abbreviation</h5>
  <div class="well"><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</div>

</div>
// /tile body

</section>
// /tile

//tile
<section class="tile">

//tile header
<div class="tile-header">
  <h1><strong>Text</strong> Alignment</h1>
  <div class="controls">
    <a href="#"><i class="fa fa-refresh"></i></a>
    <a href="#"><i class="fa fa-times"></i></a>
  </div>
</div>
// /tile header

//tile body
<div class="tile-body">
                    
  //Left align
  <p class="text-left">Left aligned text.</p>

  //Center align
  <p class="text-center">Center aligned text.</p>
  
  //Right Align
  <p class="text-right">Right aligned text.</p>

</div>
// /tile body

</section>
// /tile

//tile
<section class="tile">

//tile header
<div class="tile-header">
  <h1><strong>Address</strong> Types</h1>
  <div class="controls">
    <a href="#"><i class="fa fa-refresh"></i></a>
    <a href="#"><i class="fa fa-times"></i></a>
  </div>
</div>
// /tile header

//tile body
<div class="tile-body">
                    
  //Normal address
  <h4>Normal</h4>
  <address>
    <strong>Twitter, Inc.</strong><br>
    795 Folsom Ave, Suite 600<br>
    San Francisco, CA 94107<br>
    <abbr title="Phone">P:</abbr> (123) 456-7890
  </address>
   
  <address>
    <strong>Full Name</strong><br>
    <a href="mailto:#">first.last@example.com</a>
  </address>

  //Filled address
  <h4>Filled</h4>
  <address class="filled">
    <strong>Twitter, Inc.</strong><br>
    795 Folsom Ave, Suite 600<br>
    San Francisco, CA 94107<br>
    <abbr title="Phone">P:</abbr> (123) 456-7890
    <i class="fa fa-map-marker pull-right"></i>
  </address>
   
  <address class="filled filled-append cyan">
    <strong>Full Name</strong><br>
    <a href="mailto:#">first.last@example.com</a>
  </address>

</div>
// /tile body

</section>
// /tile

//tile
<section class="tile">

//tile header
<div class="tile-header">
  <h1><strong>Horizontal</strong> Descriptions</h1>
  <div class="controls">
    <a href="#"><i class="fa fa-refresh"></i></a>
    <a href="#"><i class="fa fa-times"></i></a>
  </div>
</div>
// /tile header

//tile body
<div class="tile-body">
                    
  //Normal description
  <h4>Normal</h4>
  <dl class="dl-horizontal">
    <dt>Description lists</dt>
    <dd>A description list is perfect for defining terms.</dd>
    <dt>Euismod</dt>
    <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
    <dd>Donec id elit non mi porta gravida at eget metus.</dd>
    <dt>Malesuada porta</dt>
    <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
  </dl>

  //Filled description
  <h4>Filled</h4>
  <dl class="dl-horizontal filled green">
    <dt>Description lists</dt>
    <dd>A description list is perfect for defining terms.</dd>
    <dt>Euismod</dt>
    <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
    <dd>Donec id elit non mi porta gravida at eget metus.</dd>
    <dt>Malesuada porta</dt>
    <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
  </dl>

</div>
// /tile body

</section>
// /tile

//tile
<section class="tile">

//tile header
<div class="tile-header">
  <h1><strong>Vertical</strong> Descriptions</h1>
  <div class="controls">
    <a href="#"><i class="fa fa-refresh"></i></a>
    <a href="#"><i class="fa fa-times"></i></a>
  </div>
</div>
// /tile header

//tile body
<div class="tile-body">
                    
  //Normal description
  <h4>Normal</h4>
  <dl>
    <dt>Description lists</dt>
    <dd>A description list is perfect for defining terms.</dd>
    <dt>Euismod</dt>
    <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
    <dd>Donec id elit non mi porta gravida at eget metus.</dd>
    <dt>Malesuada porta</dt>
    <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
  </dl>

  //Vertical description
  <h4>Filled</h4>
  <dl class="filled">
    <dt>Description lists</dt>
    <dd>A description list is perfect for defining terms.</dd>
    <dt>Euismod</dt>
    <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
    <dd>Donec id elit non mi porta gravida at eget metus.</dd>
    <dt>Malesuada porta</dt>
    <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
  </dl>

</div>
// /tile body

</section>
// /tile

//tile
<section class="tile">

//tile header
<div class="tile-header">
  <h1><strong>Text</strong> Colors</h1>
  <div class="controls">
    <a href="#"><i class="fa fa-refresh"></i></a>
    <a href="#"><i class="fa fa-times"></i></a>
  </div>
</div>
// /tile header

//tile body
<div class="tile-body">

  //Muted Text
  <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>

  //Warning Text
  <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>

  //Danger Text
  <p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>

  //Info Text
  <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam.</p>

  //Success Text
  <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

  //Red Text
  <p class="red-text">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>

  //Green Text
  <p class="green-text">Etiam porta sem malesuada magna mollis euismod.</p>

  //Cyan Text
  <p class="cyan-text">Donec ullamcorper nulla non metus auctor fringilla.</p>

  //Orange Text
  <p class="orange-text">Aenean eu leo quam. Pellentesque ornare sem lacinia quam.</p>

  //Amethyst Text
  <p class="amethyst-text">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

</div>
// /tile body

</section>
// /tile

//tile
<section class="tile">

//tile header
<div class="tile-header">
  <h1><strong>Paragraph</strong> Types</h1>
  <div class="controls">
    <a href="#"><i class="fa fa-refresh"></i></a>
    <a href="#"><i class="fa fa-times"></i></a>
  </div>
</div>
// /tile header

//tile body
<div class="tile-body">
                    
  //Normal paragraph
  <h5>Normal Paragraph</h5>
  <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.</p>

  //Lead paragraph
  <h5>Lead Paragraph</h5>
  <p class="lead">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.</p>

  //Filled paragraph
  <h5 class="filled">Filled Paragraph</h5>
  <p class="filled">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.</p>

  //Red filled paragraph
  <h5 class="filled red">Filled Paragraph Red</h5>
  <p class="filled red">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.</p>

  //Cyan filled paragraph
  <h5 class="filled cyan">Filled Paragraph Cyan</h5>
  <p class="filled cyan">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.</p>

  //Green filled paragraph
  <h5 class="filled green">Filled Paragraph Green</h5>
  <p class="filled green">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.</p>

  //Orange filled paragraph
  <h5 class="filled orange">Filled Paragraph Orange</h5>
  <p class="filled orange">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.</p>

  //Amethyst filled paragraph
  <h5 class="filled amethyst">Filled Paragraph Amethyst</h5>
  <p class="filled amethyst">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.</p>

</div>
// /tile body

</section>
// /tile

//tile
<section class="tile">

//tile header
<div class="tile-header">
  <h1><strong>Blockquote</strong> Types</h1>
  <div class="controls">
    <a href="#"><i class="fa fa-refresh"></i></a>
    <a href="#"><i class="fa fa-times"></i></a>
  </div>
</div>
// /tile header

//tile body
<div class="tile-body">

  //Default blockquote
  <h5>Default blockquote</h5>
  <blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  </blockquote>
  
  //Blockquote with source
  <h5>Blockquote with source</h5>
  <blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    <small>Someone famous <cite title="Source Title">Source Title</cite></small>
  </blockquote>
  
  //Blockquote with source pulled-right
  <h5 class="text-right">Blockquote with source pulled-right</h5>
  <blockquote class="pull-right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    <small>Someone famous <cite title="Source Title">Source Title</cite></small>
  </blockquote>

  <div class="clearfix"></div>

  //Filled Default blockquote
  <h5 class="filled">Default blockquote</h5>
  <blockquote class="filled">
      <p><i class="fa fa-quote-left pull-left"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  </blockquote>

  //Filled Blockquote with source
  <h5 class="filled green">Blockquote with source</h5>
  <blockquote class="filled green">
      <p><i class="fa fa-quote-left pull-left"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <small>Someone famous <cite title="Source Title">Source Title</cite></small>
  </blockquote>

  //Filled Blockquote with source pulled-right
  <h5 class="filled red text-right">Blockquote with source pulled-right</h5>
  <blockquote class="filled red text-right">
      <p><i class="fa fa-quote-right pull-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <small>Someone famous <cite title="Source Title">Source Title</cite></small>
  </blockquote>

</div>
// /tile body

</section>
// /tile

//tile
<section class="tile">

//tile header
<div class="tile-header">
  <h1><strong>Code</strong> Types</h1>
  <span class="note"><strong>code</strong> or <strong>pre</strong> with class <em>prettyprint lang-html/lang-css/lang-js/other</em></span>
  <div class="controls">
    <a href="#"><i class="fa fa-refresh"></i></a>
    <a href="#"><i class="fa fa-times"></i></a>
  </div>
</div>
// /tile header

//tile body
<div class="tile-body">

  //HTML Code
  <h5>Html Code</h5>
  <pre class="prettyprint lang-html">
  <!DOCTYPE html>
  <html>
  <body>

  <h1>My First Heading</h1>

  <p>My first paragraph.</p>

  </body>
  </html>
  </pre>

  //CSS Code
  <h5>CSS Code</h5>
  <pre class="prettyprint lang-css">
  html,
  body {
  height: auto;
  font-family: 'Open Sans', sans-serif;
  }

  body {
  background: #f3f3f3;
  overflow-x: hidden;
  position: relative;
  }
  </pre>

  //JavaScript Code
  <h5>JavaScript Code</h5>
  <pre class="prettyprint lang-js">
  $(function(){

  //generate pie charts
  $('.easypiechart').easyPieChart();

  //generate actual pie charts
  $('.pie-chart').easyPieChart();

  })
  </pre>

</div>
// /tile body

</section>
// /tile

//tile
<section class="tile">

//tile header
<div class="tile-header">
  <h1><strong>Predefined</strong> Lists</h1>
  <div class="controls">
    <a href="#"><i class="fa fa-refresh"></i></a>
    <a href="#"><i class="fa fa-times"></i></a>
  </div>
</div>
// /tile header

//tile body
<div class="tile-body">
  <div class="row">

    //Ordered list
    <div class="col-md-3 col-sm-6">
      <p class="small-bold uppercase">Ordered List</p>
      <ol>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
      </ol>
    </div>
    
    //Unordered list
    <div class="col-md-3 col-sm-6">
       <p class="small-bold uppercase">Unordered List</p>
        <ul>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
        </ul>
    </div>
    
    //Unstyled list
    <div class="col-md-3 col-sm-6">
       <p class="small-bold uppercase">Unstyled List</p>
        <ul class="list-unstyled">
          <li>List item</li>
          <li>List item
            <ul>
              <li>List item</li>
              <li>List item</li>
            </ul>
          </li>
          <li>List item</li>
        </ul>
    </div>
    
    //Inline list
    <div class="col-md-3 col-sm-6">
       <p class="small-bold uppercase">Inline List</p>
        <ul class="list-inline">
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
        </ul>
    </div>

  </div>
</div>
// /tile body

</section>
// /tile

//tile
<section class="tile">

//tile header
<div class="tile-header">
  <h1><strong>Custom</strong> Lists</h1>
  <span class="note"><strong>ul</strong> with class <em>list-type arrow/circle/check/caret</em></span>
  <div class="controls">
    <a href="#"><i class="fa fa-refresh"></i></a>
    <a href="#"><i class="fa fa-times"></i></a>
  </div>
</div>
// /tile header

//tile body
<div class="tile-body">
  <div class="row">

    //Arrow list type
    <div class="col-md-3 col-sm-6">
      <p class="small-bold uppercase">List type arrow</p>
      <ul class="list-type arrow">
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
    
    //Circle list type
    <div class="col-md-3 col-sm-6">
       <p class="small-bold uppercase">List type circle</p>
        <ul class="list-type circle">
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
        </ul>
    </div>
    
    //Check list type
    <div class="col-md-3 col-sm-6">
       <p class="small-bold uppercase">List type check</p>
        <ul class="list-type check">
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
        </ul>
    </div>
    
    //Caret list type
    <div class="col-md-3 col-sm-6">
       <p class="small-bold uppercase">List type caret-right</p>
        <ul class="list-type caret-right">
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
        </ul>
    </div>

  </div>
</div>
// /tile body

</section>
// /tile

//tile
<section class="tile">

//tile header
<div class="tile-header">
  <h1><strong>Custom</strong> Lists</h1>
  <span class="note"><strong>ul</strong> with class <em>fa-ul</em></span>
  <div class="controls">
    <a href="#"><i class="fa fa-refresh"></i></a>
    <a href="#"><i class="fa fa-times"></i></a>
  </div>
</div>
// /tile header

//tile body
<div class="tile-body">
  <div class="row">

    //Check list type
    <div class="col-md-3 col-sm-6">
      <p class="small-bold uppercase">List type check</p>
      <ul class="fa-ul">
        <li><i class="fa-li fa fa-check-square"></i>List item</li>
        <li><i class="fa-li fa fa-check-square"></i>List item</li>
          <ul class="fa-ul">
            <li><i class="fa-li fa fa-check-square"></i>List item</li>
            <li><i class="fa-li fa fa-check-square"></i>List item</li>
            <li><i class="fa-li fa fa-check-square"></i>List item</li>
          </ul>
        </li>
        <li><i class="fa-li fa fa-check-square"></i>List item</li>
      </ul>
    </div>
    
    //Spinner list type
    <div class="col-md-3 col-sm-6">
      <p class="small-bold uppercase">List type spinner</p>
      <ul class="fa-ul">
        <li><i class="fa-li fa fa-spinner fa-spin"></i>List item</li>
        <li><i class="fa-li fa fa-spinner fa-spin"></i>List item</li>
          <ul class="fa-ul">
            <li><i class="fa-li fa fa-spinner fa-spin"></i>List item</li>
            <li><i class="fa-li fa fa-spinner fa-spin"></i>List item</li>
            <li><i class="fa-li fa fa-spinner fa-spin"></i>List item</li>
          </ul>
        </li>
        <li><i class="fa-li fa fa-spinner fa-spin"></i>List item</li>
      </ul>
    </div>
    
    //Square list type
    <div class="col-md-3 col-sm-6">
      <p class="small-bold uppercase">List type square</p>
      <ul class="fa-ul">
        <li><i class="fa-li fa fa-square"></i>List item</li>
        <li><i class="fa-li fa fa-square"></i>List item</li>
          <ul class="fa-ul">
            <li><i class="fa-li fa fa-square"></i>List item</li>
            <li><i class="fa-li fa fa-square"></i>List item</li>
            <li><i class="fa-li fa fa-square"></i>List item</li>
          </ul>
        </li>
        <li><i class="fa-li fa fa-square"></i>List item</li>
      </ul>
    </div>
    
    //Cross list type
    <div class="col-md-3 col-sm-6">
      <p class="small-bold uppercase">List type cross</p>
      <ul class="fa-ul">
        <li><i class="fa-li fa fa-times"></i>List item</li>
        <li><i class="fa-li fa fa-times"></i>List item</li>
          <ul class="fa-ul">
            <li><i class="fa-li fa fa-times"></i>List item</li>
            <li><i class="fa-li fa fa-times"></i>List item</li>
            <li><i class="fa-li fa fa-times"></i>List item</li>
          </ul>
        </li>
        <li><i class="fa-li fa fa-times"></i>List item</li>
      </ul>
    </div>

  </div>
</div>
// /tile body

</section>
// /tile