UIDS - UI Design System

Badge

Badge

Component Preview 
<span class="badge badge--primary">Primary</span>
<span class="badge badge--secondary">Secondary</span>
<span class="badge badge--cool-gray">Cool Gray</span>
<span class="badge badge--blue">Blue</span>
<span class="badge badge--green">Green</span>
<span class="badge badge--orange">Orange</span>
<br />
<br />
<h1>First Level <span class="badge badge--primary">Badge</span></h1>
<h2>Second level <span class="badge badge--primary">Badge</span></h2>
<h3>Third level <span class="badge badge--primary">Badge</span></h3>
<h4>Fourth level <span class="badge badge--primary">Badge</span></h4>
<h5>Fifth level <span class="badge badge--primary">Badge</span></h5>
<h6>Sixth level <span class="badge badge--primary">Badge</span></h6>
  • Content: 
    .badge {
  display: inline-block;
  padding: 0 .75em;
  line-height: 1.67;
  font-size: 75%;
  font-weight: 500;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 1em; }

.badge--primary {
  background: #FFCD00;
  color: #000; }

.badge--secondary {
  background: #151515; }

.badge--cool-gray {
  background: #63666A; }

.badge--blue {
  background: #00558C; }

.badge--green {
  background: #00664F; }

.badge--orange {
  background: #BD472A; }
  • URL: /components/raw/badge/badge.css
  • Filesystem Path: src/components/badge/badge.css
  • Size: 462 Bytes
  • Content: 
    @import '../../assets/scss/variables';

.badge {
  display: inline-block;
  padding: 0 .75em;
  line-height: 1.67;
  font-size: 75%;
  font-weight: $font-weight-medium;
  color: $white;
  border: 1px solid transparent;
  border-radius: 1em;
}

.badge--primary {
  background: $primary;
  color: $blk;
}

.badge--secondary {
  background: $secondary;
}

.badge--cool-gray {
  background: $brand-cool-gray;
}

.badge--blue {
  background: $info;
}

.badge--green {
  background: $success;
}

.badge--orange {
  background: $danger;
}
  • URL: /components/raw/badge/badge.scss
  • Filesystem Path: src/components/badge/badge.scss
  • Size: 531 Bytes