Badges
A utility class that can be applied to inline elements (e.g.<span>) to create simple badges that scale down in size to match the block elements (e.g. <h1>) the badges are contained within. Disabled by default, enable with $enable-badges: true; in the configuration.scss document.
Default badges (anchor)
Simple button styles that adjust in size automically depending on where used.
Heading 1 New
Heading 2 New
Heading 3 New
Heading 4 New
Heading 5 New
Heading 6 New
Paragraph New
Example HTML
<h1>Heading 1 <span class="badge">New</span></h1>
<h2>Heading 2 <span class="badge">New</span></h2>
<h3>Heading 3 <span class="badge">New</span></h3>
<h4>Heading 4 <span class="badge">New</span></h4>
<h5>Heading 5 <span class="badge">New</span></h5>
<h6>Heading 6 <span class="badge">New</span></h6>
<p>Paragraph <span class="badge">New</span></p>
<button>Button <span class="badge">New</span></button>Colors (anchor)
With $enable-theme-colors: true;
Lignt New
Dark New
Example HTML
<p>Lignt <span class="badge badge-light">New</span></p>
<p>Dark <span class="badge badge-dark">New</span></p>With $enable-primary-colors: true;
Blue New
Red New
Green New
Orange New
Cyan New
Example HTML
<p>Blue <span class="badge badge-blue">New</span></p>
<p>Red <span class="badge badge-red">New</span></p>
<p>Green <span class="badge badge-green">New</span></p>
<p>Orange <span class="badge badge-orange">New</span></p>
<p>Cyan <span class="badge badge-cyan">New</span></p>Customize (anchor)
The badges core property values are provided as CSS variables that can be used to customize the styles inline. The values are compiled from Sass variables that can be customized in the properties.scss document when compiling.
Property values
$badge-txt: var(--text) !default;
$badge-fs: 0.65em !default;
$badge-fw: 600 !default;
$badge-py: 0.375em !default;
$badge-px: 0.65em !default;
$badge-radius: 0.25em !default;
$badge-bg: var(--surf-2);The badges utilities are compiled from the _badges.scss document within the [styles/utilities] directory. The Sass @if rules control compiling depending on settings in the configuration.scss document.
Styles
@if $enable-badges {
:where(.badge) {
@if $enable-icon-mixins or $enable-icon-styles {
--ico: var(--badge-txt);
--fs: 1em;
}
color: var(--badge-txt);
font-size: var(--badge-fs);
font-weight: var(--badge-fw);
text-align: center;
line-height: 1;
position: relative;
inset-block-start: -1px;
display: inline-block;
vertical-align: baseline;
padding-block: var(--badge-py);
padding-inline: var(--badge-px);
border-radius: var(--badge-radius);
background-color: var(--badge-bg);
}
:where(button, [type=button], .btn) .badge {
--badge-bg: var(--surf-3);
inset-block-start: -2px;
}
@if $enable-theme-colors {
.badge-light {
--badge-txt: #000;
--badge-bg: var(--surf-2-light);
}
.badge-dark {
--badge-txt: #fff;
--badge-bg: var(--surf-2-dark);
}
} // END [if/theme-colors]
@if $enable-primary-colors {
.badge-blue {
--badge-txt: #fff;
--badge-bg: var(--blue);
}
.badge-red {
--badge-txt: #fff;
--badge-bg: var(--red);
}
.badge-green {
--badge-txt: #fff;
--badge-bg: var(--green);
}
.badge-orange {
--badge-txt: #000;
--badge-bg: var(--orange);
}
.badge-cyan {
--badge-txt: #000;
--badge-bg: var(--cyan);
}
} // END [@if/primary-colors]
} // END [@if/badges]