<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>
.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: var(--brand-primary);
color: #000; }
.badge--secondary {
background: var(--brand-secondary); }
.badge--cool-gray {
background: #63666A; }
.badge--blue {
background: #00558C; }
.badge--green {
background: #00664F; }
.badge--orange {
background: #BD472A; }
@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;
}