Stats List

By Brent Swisher

F6
#
stat typography admin dashboard
How do I use This?

A formatted list for displaying numerical statistics. Great for a dashboard or admin panel.

HTML
<ul class="stats-list">
  <li>
    135 <span class="stats-list-label">Commits</span>
  </li>
  <li class="stats-list-positive">
    17,678 <span class="stats-list-label">Additions</span>
  </li>
  <li class="stats-list-negative">
    2,390 <span class="stats-list-label">Deletions</span>
  </li>
</ul>


.stats-list {
  list-style-type: none;
  clear: left;
  margin: 0;
  padding: 0;
  text-align: center;
  margin-bottom: 30px;

  .stats-list-positive {
    color: $success-color;
  }

  .stats-list-negative {
    color: $alert-color;
  }

  & > li {
    display: inline-block;
    margin-right: 10px;
    padding-right: 10px;
    border-right: 1px solid $medium-gray;
    text-align: center;
    font-size: 1.1em;
    font-weight: bold;

    &:last-child {
      border: none;
      margin: 0;
      padding: 0;
    }

    .stats-list-label {
      display: block;
      margin-top: 2px;
      font-size: 0.9em;
      font-weight: normal;
    }
  }
}



.stats-list {
  list-style-type: none;
  clear: left;
  margin: 0;
  padding: 0;
  text-align: center;
  margin-bottom: 30px;
}

.stats-list .stats-list-positive {
  color: #3adb76;
}

.stats-list .stats-list-negative {
  color: #cc4b37;
}

.stats-list > li {
  display: inline-block;
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px solid #cacaca;
  text-align: center;
  font-size: 1.1em;
  font-weight: bold;
}

.stats-list > li:last-child {
  border: none;
  margin: 0;
  padding: 0;
}

.stats-list > li .stats-list-label {
  display: block;
  margin-top: 2px;
  font-size: 0.9em;
  font-weight: normal;
}
JS

Similar Building Blocks

status

Blog Tag Cloud

F6
by Laurel Beyers
status

Alert Callouts Bordered

F6
by Rafi
status

Progress Indicator

F6
by Rafi