presidential-innovation-fellows/code-gov-web

<div class="roadmap-general">

  <div class="banner" [style.background-image]="bannerImage">
    <div class="banner-content">
      <div class="banner-title">Roadmap</div>
    </div>
  </div>

  <div class="indented">
    <ul class="breadcrumbs">
      <li><a routerLink="/">Home</a></li>
      <li>Roadmap</li>
    </ul>
  </div>

  <div class="indented roadmap-overview">
    <h3>Overview</h3>
    <p *ngFor="let paragraph of content.roadmap.overview" [innerHTML]="sanitizer.bypassSecurityTrustHtml(paragraph)"></p>
  </div>

  <div class="indented roadmap-table-title">
    <h3>Roadmap</h3>
  </div>

  <div class="indented roadmap-table">
    <div class="width-third">
      <table>
        <thead>
          <tr>
            <th colspan="2">Near-term</th>
          </tr>
        </thead>
          <tbody>
            <tr *ngFor="let todo of content.roadmap.near">
              <td class="graphic-cell">
                <i class="icon {{todo.status === 'Released' ? 'icon-ok' : todo.status === 'In Progress' ? 'icon-circle' : ''}}" aria-hidden="true"></i>
              </td>
              <td class="widerow text-cell">{{ todo.name }}</td>
            </tr>
        </tbody>
      </table>
    </div>

    <div class="width-third">
      <table>
        <thead>
          <tr>
            <th colspan="2">Mid-term</th>
          </tr>
        </thead>
          <tbody>
            <tr *ngFor="let todo of content.roadmap.mid">
              <td class="graphic-cell">
                <i class="icon {{todo.status === 'Released' ? 'icon-ok' : todo.status === 'In Progress' ? 'icon-circle' : ''}}" aria-hidden="true"></i>
              </td>
              <td class="widerow text-cell">{{ todo.name }}</td>
            </tr>
        </tbody>
      </table>
    </div>

    <div class="width-third">
      <table>
        <thead>
          <tr>
            <th colspan="2">Long-term</th>
          </tr>
        </thead>
          <tbody>
            <tr *ngFor="let todo of content.roadmap.long">
              <td class="graphic-cell">
                <i class="icon {{todo.status === 'Released' ? 'icon-ok' : todo.status === 'In Progress' ? 'icon-circle' : ''}}" aria-hidden="true"></i>
              </td>
              <td class="widerow text-cell">{{ todo.name }}</td>
            </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="indented roadmap-legend">
    <div class="width-third">
      <table>
        <thead></thead>
          <tbody>
            <tr>
              <td class="pull-down"><i class="icon icon-ok" aria-hidden="true"></i></td>
              <td class="widerow pull-down">Released</td>
            </tr>
            <tr>
              <td class="push-up"><i class="icon icon-circle" aria-hidden="true"></i></td>
              <td class="widerow push-up">In Progress</td>
            </tr>
        </tbody>
      </table>
    </div>
  </div>

  <div class="indented roadmap-disclaimer">
    <h3>Disclaimer</h3>
    <p>{{content.roadmap.disclaimer}}</p>
  </div>
</div>