Conference tracks

.html

<div class="row">
  <div class="col-lg-9">
    <nav>
      <p aria-hidden="true" class="d-inline-block h5 text-uppercase mr-1">Days</p>
      <ul class="d-inline-block list-inline list-inline-borders">
        <li class="list-inline-item h3">
          <a href="#d20190823"><span class="sr-only">Day</span> 1</a>
        </li>
        <li class="list-inline-item h3">
          <a href="#d20190824"><span class="sr-only">Day</span> 2</a>
        </li>
      </ul>
    </nav>
  </div>
  <div class="col-lg-3">
    <h3><a href="#">Tracks</a></h3>
    <ul class="list-unstyled">
      <li class="ws-schedule-session-type societies text-capitalize">
        <a href="#">Thriving societies</a>
      </li>
      <li class="ws-schedule-session-type economies text-capitalize">
        <a href="#">Evolving economies</a>
      </li>
      <li class="ws-schedule-session-type ecosystems text-capitalize">
        <a href="#">Self-sustaining ecosystems</a>
      </li>
    </ul>
  </div>
</div>

.ws-schedule-session-type:before {
    content: "";
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    margin-right: 0.5em;
}

.societies:before {
  background: #0084AD;
}

.economies:before {
  background: #FF6C0C; 
}

.ecosystems:before {
  background: #8AE2D1; 
}