Badges

Badges are labels which hold small amounts of information. In our case, they are mostly used to display the difference between two sets of data.

Example badge
Example badge with left aligned icon
Example badge with right aligned icon
 
 
General CSS for badges

.badge {
  display: inline-block;
  min-width: 60px;
  height: 24px;
  padding: 0 8px;
  font: 600 12px/24px Nunito, sans-serif;
  border-radius: 3px;
}

Badge variations

You can also include icons in your badge, which have the same color, but less opacity.
 
 
Blue badges

Blue badge
Blue badge with left aligned icon
Blue badge with right aligned icon
 
 
Green badges

Green badge
Green badge with left aligned icon
Green badge with right aligned icon
 
 
Red badges

Red badge
Red badge with left aligned icon
Red badge with right aligned icon
 
 
Yellow badges

Yellow badge
Yellow badge with left aligned icon
Yellow badge with right aligned icon
 
 
Grey badges

Grey badge
Grey badge with left aligned icon
Grey badge with right aligned icon
 
 
Additional CSS for badges

.badge.badge-blue {
  color: #0275a7;
  background: #ebfaff;
}

.badge.badge-green {
  color: #007a74;
  background: #e9fcf3;
}

.badge.badge-grey {
  color: #415068;
  background: #f4f7fa;
}

.badge.badge-red {
  color: #c93154;
  background: #fff3f4;
}

.badge.badge-yellow {
  color: #ffca5a;
  background: #fffbed;
}
 
.badge.icon .feather {
  opacity: .7;
  margin-top: -1px;
  stroke-width: 2.5px;
}

.badge.icon.icon-left .feather {
  margin-left: -1px;
  padding: 0 4px 0 0;
}

.badge.icon.icon-right .feather {
  margin-right: -1px;
  padding: 0 0 0 4px;
}

Example usage

In this case, badges are used to display the difference between the last week of data vs. the week before. When used in a table row, the badges should all have the same width.
 
 
badge_sample