marcells/node-build-monitor

<div class="stoplight full-size">
  <div class="flex-container" data-bind="foreach: builds">
    <div data-bind='hover: isMenuVisible' class="flex-item">
      <div data-bind="animateCss: style" class="flex-item-inner nowrap">
        <span data-bind="text: project" class="project nowrap"></span>
        <div class="clear"></div>
        <span data-bind="text: definition, visible: definition" class="definition"></span>
        <div class="clear"></div>
        <span data-bind="text: number" class="number nowrap"></span>
        <div class="clear"></div>
        <div class="medium-height nowrap prio-vertical-one">
          <span data-bind="text: statusText" class="middle status"></span>
          <span class="middle duration-block reset-height prio-horizontal-three">
            <span data-bind="text: time" class="middle time"></span>
            <br />
            <span data-bind="text: duration" class="middle time"></span>
          </span>
        </div>
        <div class="clear"></div>
        <div class="medium-height nowrap prio-vertical-three">
          <span class="middle requestedFor-block">
            <span class="middle fa fa-user"></span>
            <span data-bind="text: requestedFor" class="middle for"></span>
          </span>
          <span class="middle warnings prio-horizontal-one">
            <span data-bind="visible: hasWarnings" class="middle fa fa-exclamation-triangle"></span>
            <span data-bind="visible: hasErrors" class="middle fa fa-times-circle"></span>
          </span>
        </div>
        <div class="clear"></div>
      </div>

      <div data-bind="fade: isMenuAvailable() && isMenuVisible(), fadeInDuration: 200, fadeOutDuration: 10" style="display: none" class="overlay">
        <a data-bind="visible: url, attr: { href: url }" target="_blank">
          <i class="fa fa-external-link"></i>
        </a>
      </div>
    </div>
  </div>
</div>