Dashboard Nav Card

By Tim Hartwick

F6
card dashboard data nav
How do I use This?

A simple card for navigation that includes an icon

HTML
<a class="dashboard-nav-card" href="#">
  <i class="dashboard-nav-card-icon fa fa-users" aria-hidden="true"></i>
  <h3 class="dashboard-nav-card-title">Visitors</h3>
</a>


.dashboard-nav-card {
  background: $primary-color;
  border-radius: $card-border-radius;
  color: $white;
  display: block;
  min-height: 100px;
  padding: 2rem;
  position: relative;
  width: 100%;

  &:hover {
    .dashboard-nav-card-title,
    .dashboard-nav-card-icon {
      color: $white;
    }

    .dashboard-nav-card-icon {
      opacity: 1;
      transition: all 0.2s ease;
    }
  }
}

.dashboard-nav-card-icon {
  font-size: rem-calc(20);
  left: 1rem;
  opacity: 0.5;
  position: absolute;
  top: 1rem;
  transition: all 0.2s ease;
  width: auto;
}

.dashboard-nav-card-title {
  bottom: 0;
  position: absolute;
  right: 1rem;
  text-align: right;
}



.dashboard-nav-card {
  background: #1779ba;
  border-radius: 0;
  color: #fefefe;
  display: block;
  min-height: 100px;
  padding: 2rem;
  position: relative;
  width: 100%;
}

.dashboard-nav-card:hover .dashboard-nav-card-title,
.dashboard-nav-card:hover .dashboard-nav-card-icon {
  color: #fefefe;
}

.dashboard-nav-card:hover .dashboard-nav-card-icon {
  opacity: 1;
  transition: all 0.2s ease;
}

.dashboard-nav-card-icon {
  font-size: 1.25rem;
  left: 1rem;
  opacity: 0.5;
  position: absolute;
  top: 1rem;
  transition: all 0.2s ease;
  width: auto;
}

.dashboard-nav-card-title {
  bottom: 0;
  position: absolute;
  right: 1rem;
  text-align: right;
}
JS

Similar Building Blocks

navigation

Mobile Footer / Bottom Bar

F6
by Kevin Ball
navigation

Mobile App Bottom Bar

F6
by Rafi
navigation

Pagination with Pointed Buttons

F6
by Rafi