Dashboard Number Card

By Kevin Ball

F6
#
How do I use This?

A simple card for displaying data with positive and negative indicators

HTML
<div class="dashboard-number-card{{#if positive}} positive{{/if}}{{#if negative}} negative{{/if}}">
  <h5 class="dashboard-number-value">$20,000</h5>
  <div>
    <p class="dashboard-number-area">Category</p>
    <p class="dashboard-number-delta">
    {{#if positive}}
      <i class="fa fa-arrow-up" aria-hidden="true"></i>
    {{else}}
      {{#if negative}}
      <i class="fa fa-arrow-down" aria-hidden="true"></i>
      {{/if}}
    {{/if}}
    $3000(10%)
    </p>
  </div>
</div>


$dashboard-number-color: $primary-color;
$dashboard-number-positive-bg: $success-color;
$dashboard-number-negative-bg: $alert-color;

.dashboard-number-card {
  background: #fff;
  border-radius: 5px;
  margin: 0 20px 20px;
  position: relative;

  .dashboard-number-delta {
    align-items: baseline;
    bottom: 6px;
    display: flex;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 0;
    opacity: 0.7;
    position: absolute;
    right: 6px;
    color: $dashboard-number-color;

    i {
      margin-right: 5px;
      width: 0.6rem;
    }
  }

  &.positive,
  &.negative {
    .dashboard-number-delta {
      color: $white;
    }

    .dashboard-number-value,
    .dashboard-number-area {
      color: lighten($white, 10%);
    }

    .dashboard-number-area {
      opacity: 0.6;
    }
  }

  &.positive {
    background: $dashboard-number-positive-bg;
  }

  &.negative {
    background: $dashboard-number-negative-bg;
  }
}

.dashboard-number-value {
  color: $dashboard-number-color;
  font-size: 22px;
  font-weight: 800;
  padding: 1rem 2rem 1.75rem;
  text-align: center;
}

.dashboard-number-area {
  bottom: 6px;
  color: $dashboard-number-color;
  font-size: 12px;
  left: 6px;
  margin-bottom: 0;
  position: absolute;
}




.dashboard-number-card {
  background: #fff;
  border-radius: 5px;
  margin: 0 20px 20px;
  position: relative;
}

.dashboard-number-card .dashboard-number-delta {
  -webkit-align-items: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  bottom: 6px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 0;
  opacity: 0.7;
  position: absolute;
  right: 6px;
  color: #1779ba;
}

.dashboard-number-card .dashboard-number-delta i {
  margin-right: 5px;
  width: 0.6rem;
}

.dashboard-number-card.positive .dashboard-number-delta, .dashboard-number-card.negative .dashboard-number-delta {
  color: #fefefe;
}

.dashboard-number-card.positive .dashboard-number-value,
.dashboard-number-card.positive .dashboard-number-area, .dashboard-number-card.negative .dashboard-number-value,
.dashboard-number-card.negative .dashboard-number-area {
  color: white;
}

.dashboard-number-card.positive .dashboard-number-area, .dashboard-number-card.negative .dashboard-number-area {
  opacity: 0.6;
}

.dashboard-number-card.positive {
  background: #3adb76;
}

.dashboard-number-card.negative {
  background: #cc4b37;
}

.dashboard-number-value {
  color: #1779ba;
  font-size: 22px;
  font-weight: 800;
  padding: 1rem 2rem 1.75rem;
  text-align: center;
}

.dashboard-number-area {
  bottom: 6px;
  color: #1779ba;
  font-size: 12px;
  left: 6px;
  margin-bottom: 0;
  position: absolute;
}

JS