Modules
Badge
Badge is a module for displaying something countable.
Usage #
By default, the badge module has the badge class and several color modifiers to show different states or types.
<span class="badge">1</span>
<span class="badge badge-info">2</span>
<span class="badge badge-positive">3</span>
<span class="badge badge-important">4</span>
<span class="badge badge-dark">5</span>
<span class="badge badge-light">6</span>Examples #
Badges are well placed in other modules, for example, inside the Button module.
<button class="button">
<span>Button</span>
<span class="badge ml-1">5</span>
</button>
<button class="button button-primary">
<span>Button</span>
<span class="badge badge-light ml-1">5</span>
</button>Or inside the Menu module.
<nav class="menu menu-stacked">
<ul class="menu-list">
<li class="menu-item">
<a href="#" class="menu-link">News</a>
<span class="badge">1</span>
</li>
<li class="menu-item">
<a href="#" class="menu-link">Analytics</a>
<span class="badge badge-info">2</span>
</li>
<li class="menu-item">
<a href="#" class="menu-link">Messages</a>
<span class="badge badge-positive">3</span>
</li>
</ul>
</nav>Scales #
By default, badges come in several sizes.
- default
- large
- huge
- mega
<span class="badge badge-info">1</span>
<span class="badge badge-info badge-large">2</span>
<span class="badge badge-info badge-huge">3</span>
<span class="badge badge-info badge-mega">4</span>You can add your own size or change an existing one by extending the type scale and module properties. See also how to work with text size scales and how to work with variants for modules.
// =Scales
$scales: map-extend($scales, (
type: (
badge: (
large: 14px, // change existing size
giga: 28px // add new size
)
)
));
// =Variants
$variants: map-extend($variants, (
badge: (
giga: (
min-height: 60px,
min-width: 60px
)
)
));
In this case, Superkube will automatically generate the badge-giga modifier.
<span class="badge badge-info badge-giga">2</span>Colors #
For the badge module, you can add a color to existing colors, override existing colors, add a new color group. See also how to work with colors for modules.
Add color
To add a new color for a module, first make sure that it is in the color palette.
If not, add a new color to $palette.
// =Palette
$palette: map-extend($palette, (
yellow: (
base: #FFBB00
)
));Now extend the colors of the module with a new modifier and add the color from the palette.
// =Colors
$colors: map-extend($colors, (
badge: (
default: (
accent: (
background-color: palette(yellow, base),
color: palette(black)
)
)
)
));
That's all. Now Superkube will automatically generate a new badge-accent color modifier.
<span class="badge badge-accent">5</span>
<span class="badge badge-accent badge-large">5</span>
<span class="badge badge-accent badge-huge">5</span>
<span class="badge badge-accent badge-mega">5</span>Override existing colors
Any default color in a module can be overridden. Also see that we added the badge border color to show how easy it is to override any module colors.
// =Colors
$colors: map-extend($colors, (
badge: (
default: (
info: (
background-color: palette(yellow, lighter),
color: palette(yellow, darker),
border-color: rgba(palette(yellow, base), .8)
)
)
)
));
Note: You must first add a color to the palette if it's not already there, and only then use the colors from the palette in $colors.
Here's more on how to work with colors in Superkube.
Now the badge with the badge-info modifier looks different than the default one.
It has a yellow background and border.
<span class="badge badge-info">5</span>
<span class="badge badge-info badge-large">5</span>
<span class="badge badge-info badge-huge">5</span>
<span class="badge badge-info badge-mega">5</span>Add color group
You can add a complete group of colors to a module, not just one modifying color. This can be useful if you use different variants of badges in your design for various cases.
To add a new color group, extend $colors by specifying the name of the modifier group and the modifiers themselves.
Let's say we want to make badges without a background and with a colored border.
// =Colors
$colors: map-extend($colors, (
badge: (
outline: (
base: (
background-color: transparent,
color: palette(neutral, darker),
border-color: palette(black-o, 20)
),
info: (
background-color: transparent,
color: palette(active, dark),
border-color: palette(active, light)
),
positive: (
background-color: transparent,
color: palette(positive, dark),
border-color: palette(positive, light)
),
important: (
background-color: transparent,
color: palette(negative, dark),
border-color: palette(negative, light)
),
dark: (
background-color: transparent,
color: palette(black),
border-color: palette(black-o, 80)
),
light: (
background-color: transparent,
color: palette(white),
border-color: palette(white-o, 80)
)
)
)
));
Now Superkube will automatically generate a new group of badges with badge-outline modifier.
<span class="badge badge-outline">1</span>
<span class="badge badge-outline badge-info">2</span>
<span class="badge badge-outline badge-positive">3</span>
<span class="badge badge-outline badge-important">4</span>
<span class="badge badge-outline badge-dark">5</span>
<span class="badge badge-outline badge-light">6</span>You can use both badges in your HTML, even at the same time.
<span class="badge badge-info">1</span>
<span class="badge badge-outline badge-info">2</span>Variants #
In Superkube you can easily create module modifiers, which will be automatically generated from the variables. See also how to work with variants for modules.
Add new variant
To add a new variant of a module, extend $variants and specify variants with those CSS properties that should be different from the default.
// =Variants
$variants: map-extend($variants, (
badge: (
square: (
border-radius: radius(small)
)
)
));
In this case Superkube will automatically generate the badge-square class, with the properties specified in the variables.
Now you have a modifier, with which you can quickly add or change the appearance of the module.
<span class="badge badge-square badge-positive">2</span>
<span class="badge badge-square badge-large badge-positive">2</span>
<span class="badge badge-square badge-huge badge-positive">2</span>
<span class="badge badge-square badge-mega badge-positive">2</span>Override existing variant
In addition to creating a new variant, you can override the existing default appearance for module.
Extend $variants with the new default badge properties.
// =Variants
$variants: map-extend($variants, (
badge: (
default: (
font-family: $font-monospace,
font-weight: bold,
min-width: 22px,
min-height: 22px
)
)
));
Variables #
The default properties and colors of the module are shown below. These are all specified in the source SCSS variables. This is here for clarity and to simplify modification and overriding of values
// =Type
$scales: (
type: (
badge: (
default: 11px,
large: 14px,
huge: 16px,
mega: 21px
)
)
);
// =Colors
$colors: (
badge: (
default: (
base: (
background-color: palette(neutral, lighter),
color: palette(neutral, darker)
),
info: (
background-color: palette(active, lighter),
color: palette(active, dark)
),
positive: (
background-color: palette(positive, lighter),
color: palette(positive, dark)
),
important: (
background-color: palette(negative, lighter),
color: palette(negative, dark)
),
dark: (
background-color: palette(black),
color: palette(white)
),
light: (
background-color: palette(white),
color: palette(black)
)
)
)
);
// =Variants
$variants: (
badge: (
default: (
font-weight: 600,
border-radius: 99px,
padding: 1px 4px,
border: 1px solid transparent,
line-height: 16px,
min-width: 20px,
min-height: 20px
),
large: (
min-height: 26px,
min-width: 26px
),
huge: (
min-height: 36px,
min-width: 36px
),
mega: (
min-height: 48px,
min-width: 48px
)
)
);