Dashboard Number Card

By Kevin Ball

card dashboard data

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;
}

Dashboard Number Card

By Kevin Ball

Tabbed Card

Full Screen Hero

Responsive Social Media Section

Dashboard Number Card

By Kevin Ball

Similar Building Blocks

Tabbed Card

Full Screen Hero

Responsive Social Media Section