//tile
<section class="tile">

  //tile header
  <div class="tile-header color hotpink">
    <h1><strong>Colored Tile Header</strong> Hotpink</h1>
    <div class="controls">
      <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
      <a href="#" class="remove"><i class="fa fa-times"></i></a>
    </div>
  </div>
  // /tile header

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

    <p>This is tile widget area.</p>

  </div>
  // /tile widget

  //tile body
  <div class="tile-body">
                    
    <p>This is tile body area.</p>

  </div>
  // /tile body

  //tile footer
  <div class="tile-footer">
                    
    <p>This is tile footer area.</p>

  </div>
  // /tile footer

</section>
// /tile

//tile
<section class="tile">

  //tile header
  <div class="tile-header">
    <h1><strong>Colored Tile Footer</strong> Green</h1>
    <div class="controls">
      <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
      <a href="#" class="remove"><i class="fa fa-times"></i></a>
    </div>
  </div>
  // /tile header

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

    <p>This is tile widget area.</p>

  </div>
  // /tile widget

  //tile body
  <div class="tile-body">
                    
    <p>This is tile body area.</p>

  </div>
  // /tile body

  //tile footer
  <div class="tile-footer color green">
                    
    <p>This is tile footer area.</p>

  </div>
  // /tile footer

</section>
// /tile

//tile
<section class="tile">

  //tile header
  <div class="tile-header color red text-center">               
    <button class="btn pull-left btn-black-transparent" type="button"><i class="fa fa-caret-square-o-down"></i></button>
    <h1 class="small-uppercase">Heading with button</h1>
    <div class="controls">
      <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
      <a href="#" class="remove"><i class="fa fa-times"></i></a>
    </div>
  </div>
  // /tile header

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

    <p>This is tile widget area.</p>

  </div>
  // /tile widget

  //tile body
  <div class="tile-body">
                    
    <p>This is tile body area.</p>

  </div>
  // /tile body

  //tile footer
  <div class="tile-footer">
                    
    <p>This is tile footer area.</p>

  </div>
  // /tile footer

</section>
// /tile

//tile
<section class="tile">

  //tile header
  <div class="tile-header">
    <h1><strong>Colored Tile Widget</strong> Orange</h1>
    <div class="controls">
      <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
      <a href="#" class="remove"><i class="fa fa-times"></i></a>
    </div>
  </div>
  // /tile header

  //tile widget
  <div class="tile-widget color orange">

    <p>This is tile widget area.</p>

  </div>
  // /tile widget

  //tile body
  <div class="tile-body">
                    
    <p>This is tile body area.</p>

  </div>
  // /tile body

  //tile footer
  <div class="tile-footer">
                    
    <p>This is tile footer area.</p>

  </div>
  // /tile footer

</section>
// /tile

//tile
<section class="tile">

  //tile header
  <div class="tile-header transparent">               
    <h1><strong>Transparent</strong> Header</h1>
    <div class="controls">
      <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
      <a href="#" class="remove"><i class="fa fa-times"></i></a>
    </div>
  </div>
  // /tile header

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

    <p>This is tile widget area.</p>

  </div>
  // /tile widget

  //tile body
  <div class="tile-body">
                    
    <p>This is tile body area.</p>

  </div>
  // /tile body

  //tile footer
  <div class="tile-footer">
                    
    <p>This is tile footer area.</p>

  </div>
  // /tile footer

</section>
// /tile

//tile
<section class="tile">

  //tile header
  <div class="tile-header">
    <h1><strong>Colored Tile Body</strong> Dutch</h1>
    <div class="controls">
      <a href="#" class="refresh"><i class="fa fa-refresh"></i></a>
      <a href="#" class="remove"><i class="fa fa-times"></i></a>
    </div>
  </div>
  // /tile header

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

    <p>This is tile widget area.</p>

  </div>
  // /tile widget

  //tile body
  <div class="tile-body color dutch">
                    
    <p>This is tile body area.</p>

  </div>
  // /tile body

  //tile footer
  <div class="tile-footer">
                    
    <p>This is tile footer area.</p>

  </div>
  // /tile footer

</section>
// /tile

//tile
<section class="tile">

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

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

    <p><strong>Tile without heading.</strong> This is tile widget area.</p>

  </div>
  // /tile widget

  //tile body
  <div class="tile-body">
                    
    <p>This is tile body area.</p>

  </div>
  // /tile body

  //tile footer
  <div class="tile-footer">
                    
    <p>This is tile footer area.</p>

  </div>
  // /tile footer

</section>
// /tile