Badges
A basic badge utility style for simple inline notifications or content notes.
Examples
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>Using the module
Add the sassmods.scss to your custom styles as below then include the Sass mixin anywhere below.
custom.scss
@use "sassmods/scss/sassmods" as *;
@include badges-css;See customizing for information about using the Sass and CSS variables in the source code (see below) to customize the styles, and Sass variables (on the using SassMods page) for other ways to use the variables to create custom styles.
Source
_badges.scss
// ----------------------------------------------------------
// Badges
// ----------------------------------------------------------
$badge-text-color: var(--badge-text, inherit) !default;
$badge-font-size: var(--badge-fs, 0.65em) !default;
$badge-font-weight: var(--badge-fw, 600) !default;
$badge-padding-block: var(--badge-py, 0.375em) !default;
$badge-padding-inline: var(--badge-px, 0.65em) !default;
$badge-border-color: var(--badge-bd-color, color-mix(in srgb, CanvasText 10%, Canvas)) !default;
$badge-radius: var(--badge-radius, 0.188rem) !default;
$badge-background-color: var(--badge-bg, color-mix(in srgb, CanvasText 6%, Canvas)) !default;
@mixin badges-css {
:where(.badge) {
color: $badge-text-color;
font-size: $badge-font-size;
font-weight: $badge-font-weight;
text-align: center;
line-height: 1;
position: relative;
inset-block-start: -0.125em;
display: inline-block;
vertical-align: baseline;
padding-block: $badge-padding-block;
padding-inline: $badge-padding-inline;
border: 1px solid $badge-border-color;
border-radius: $badge-radius;
background-color: $badge-background-color;
}
} // end badges-css