Badges
A basic badge utility that can be customized with variables globally or inline.
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, use the Sass variables from the module's source code (see below) to customize the default property values if required, then include the Sass mixin anywhere below.
@use "sassmods/scss/sassmods" as *;
$badge-padding-block: 0.25rem; // example
$badge-padding-inline: 0.5rem; // example
@include badges-css;Using the framework
Enable the module in the sassmods-system.scss document as below, if required customize the styles or the Sass variables for the default property values directly in the source code (see below).
$enable-badges: true;Source
The source code is a self-contained Sass document that compiles the style modules as Sass mixins using Sass variables provided for the core property values that can be customized as described above.
_badges.scss
Use the property specific CSS variables to create root level variables for global styles and/or editing inline, or change all the values to suit your own parameters.
// ----------------------------------------------------------
// Badges
// ----------------------------------------------------------
$badge-text-color: var(--badge-txt, 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-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: -1px;
display: inline-block;
vertical-align: baseline;
padding-block: #{$badge-padding-block};
padding-inline: #{$badge-padding-inline};
border-radius: #{$badge-radius};
background-color: #{$badge-background-color};
}
} // end badges-css