Lights / Bullets

TIP

Traffic lights / bullets for rating systems.

Traffic Lights

.traffic-light.rating-yellow[.rating-red, .rating-green] > .light

  <div class="traffic-light rating-green">
    <div class="light light-red"></div>
    <div class="light light-yellow"></div>
    <div class="light light-green"></div>
  </div>
  <div class="traffic-light rating-yellow">
    <div class="light light-red"></div>
    <div class="light light-yellow"></div>
    <div class="light light-green"></div>
  </div>
  <div class="traffic-light rating-red">
    <div class="light light-red"></div>
    <div class="light light-yellow"></div>
    <div class="light light-green"></div>
  </div>