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 default badges property values can be customized in the properties.scss document. The styles can be customized in the _badges.scss document in the [styles/utilities] directory, they're written as standard CSS with limited Sass functionality included for compiling purposes.
$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.188rem !default;
$badge-bg: var(--surf-2);Styles
// ----------------------------------------------------------
// Badges
// ----------------------------------------------------------
@use "../../configuration" as *;
@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;
}
.badge-light {
--badge-txt: #000;
--badge-bg: var(--surf-2-light);
}
.badge-dark {
--badge-txt: #fff;
--badge-bg: var(--surf-2-dark);
}
@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]