  <div class="foreground">
    <div class="title">
      <h1>Pages</h1>
          <p>Pages are specific instances of templates and swap out placeholder content with real representative content to give an accurate depiction of what a user will ultimately see.</p>
          <p>Pages are essential for testing the effectiveness of the design system. This final form allows us to loop back to modify our basics, components and templates to better address the real context of the design.</p>
          <p>Pages also provide a place to test variations in templates, such as testing an article containing a 40-character-length headline and other article with a 340-character-length headline. What does it look like when a user has one item in their shopping cart versus 10 items with a discount code applied? These specific page instances test the resiliency of the system, influencing how the underlying molecules, organisms, and templates are constructed.</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>
