<div class="foreground">
    <div class="title">
      <h1>Basics</h1>
          <p>Basic elements are the smallest and simple design pattern elements translated to interfaces.</p>
          <p>Basic UI tags, such as form labels, inputs or buttons. They also include more abstract elements like color palettes, fonts, and animations.</p>
          <p>Basics can not be broken down any further, they are abstract and aren't often terribly useful on their own, but they provide a useful reference and allow you to see all your global styles.</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>
