<div class="foreground">
  <div class="title">
    <h1>Templates</h1>
    <p>Templates are comprised mostly of components combined together to form page-level objects.</p>
    <p>Templates provide context for these relatively abstract components, which is helpful for designers and clients alike, templates mostly focus on content structure (such as character length, image size, etc) rather than the actual content.</p>
  </div>
  <div class="progress">
    <h3>Progress</h3>
    <hr/>
    <p>Production Ready</p>
    <div class="bar ready"></div>
    <p>Needs Refactoring</p>
    <div class="bar refactor"></div>
    <p>Work in Progress</p>
    <div class="bar wip"></div>
    <p>Deprecated</p>
    <div class="bar deprecated"></div>
  </div>
  <div style="clear: both;"></div>
</div>
