conveyal/modeify

<div class="Accounts" style="padding-left: 100px;">
  <div class="row">

    <div class="col-sm-12">
      <h1><strong>Modeify Style Guide</strong></h1>
      <p>There should be no custom styles for this style guide. Every element's style should be composed of classes from existing styles in other components.</p>
    </div>

    <div class="col-sm-12">
    <h2><strong>Exit</strong></h2>
    <a class="close" href="#" on-tap="hide"><i class="fa fa-times"></i></a>
    </div>


    <div class="col-sm-12">
      <br><br>
      <h2><strong>Typography</strong></h2>
      <h3>This is our header font</h3>

      <p>This is our paragraph font</p>

      <a>This is a link</a>

    </div>

    <div class="col-sm-12">
      <br><br>
      <h2><strong>Buttons</strong></h2>
      <button class="btn btn">"btn btn"</button> Used as default button styling.<br><br>
      <button class="btn btn-dark">"btn btn-dark"</button> Used for 2nd tier buttons, such as viewing details or more information.<br><br>
      <button class="btn btn-demph">"btn btn-demph"</button> Used for 3rd tier, de-emphasized buttons.
    </div>


<div class="col-sm-12">
    <br><br>
    <h2><strong>Mode Filters</strong></h2>
   <div class="mode-filters">
    <a class="icon-train" data-active="train"><i class="fa fa-check-circle"></i></a>
    <a class="icon-bus" data-active="bus"><i class="fa fa-check-circle"></i></a>
    <a class="icon-bike" data-active="bike"><i class="fa fa-check-circle"></i></a>
    <a class="icon-car" data-active="car"><i class="fa fa-check-circle"></i></a>
  </div>
</div>

<div class="col-sm-12">
    <br><br>
    <h2><strong>Mode Icons</strong></h2>
     <div class="mode">
     <i class="icon-bike"></i>
    <i class="fa fa-caret-down"></i>
  </div>
</div>

<div class="col-sm-12">
    <br><br>
    <h2><strong>Comparison Table</strong></h2>
     <table data-toggle="table" class="table table-bordered table-responsive">
      <thead>
        <tr>
            <th data-field="id">Option</th>
            <th data-field="name">Average Travel Time</th>
            <th data-field="price">Transfers</th>
            <th data-field="id">Walk Access Time</th>
            <th data-field="name">Frequency</th>
            <th data-field="price">Cost</th>
            <th data-field="id">Carlories Burned</th>
            <th data-field="name">Productive Time Gained</th>
            <th data-field="price">Vehicle Emissions</th>
            <th data-field="id"></th>
        </tr>
        <tr>
            <td><i class="icon-walk"></i></td>
            <td>30 mins</td>
            <td>N/A</td>
            <td>N/A</td>
            <td>N/A</td>
            <td>$0</td>
            <td>200</td>
            <td>N/A</td>
            <td>0</td>
            <td><button class="btn btn-default">Select</button>
        </tr>
        <tr>
            <td><i class="icon-train"></i></td>
            <td>28 mins</td>
            <td>2</td>
            <td>5 mins</td>
            <td>every 2 mins</td>
            <td>$3.00</td>
            <td>50</td>
            <td>8 mins</td>
            <td>0</td>
            <td><button class="btn btn-default">Select</button>
        </tr>
        <tr>
            <td><i class="icon-bus"></i></td>
            <td>36 mins</td>
            <td>1</td>
            <td>2 mins</td>
            <td>every 9 mins</td>
            <td>$2.50</td>
            <td>20</td>
            <td>5 mins</td>
            <td>0</td>
            <td><button class="btn btn-default">Select</button>
        </tr>
        <tr>
            <td><i class="icon-carshare"></i></td>
            <td>16 mins</td>
            <td>NA</td>
            <td>NA</td>
            <td>NA</td>
            <td>$5.00</td>
            <td>0</td>
            <td>0 mins</td>
            <td>10 lbs CO2</td>
            <td><button class="btn btn-default">Select</button>
        </tr>
    </thead>
    </table>
</div>

<div class="col-sm-12">
    <br><br>
    <h2><strong>Dropdowns</strong></h2>
    <select select-value="days">
      <option value="M—F">Mon - Fri</option>
      <option value="Sat">Saturday</option>
      <option value="Sun">Sunday</option>
    </select>
</div>

</div>
</div>