Modules

Label

This module helps to show labels and tags.

Usage #

By default, the label module has the label class and several color modifiers to show different states or types.

Default Pimary Positive Important Dark Light
<span class="label">...</span>
<span class="label label-primary">...</span>
<span class="label label-positive">...</span>
<span class="label label-important">...</span>
<span class="label label-dark">...</span>
<span class="label label-light">...</span>

Close

Label can have a close icon. To do this, the close module can be placed inside it. The close icon inherits the color of the label text automatically.

Note: Superkube is a javascript-agnostic framework, so it does not provide a way to hide or show something by clicking.

Default Primary Positive Important Dark Light

<span class="label">
    Label
    <span class="close"></span>
</span>

Scales #

By default, labels come in several sizes.

  • default
  • large
Default Large

<span class="label label-primary">...</span>
<span class="label label-primary label-large">...</span>

You can add your own sizes or change an existing one by creating a modifier and specifying new label parameters in your custom SCSS.


.label-large {
    --label-font-size: var(--type-scale-18);
}
.label-giga {
    --label-font-size: var(--type-scale-28);
}

Now you have a new label-giga size modifier and changed label-large with new value of text size.

Large Giga

<span class="label label-primary label-large">...</span>
<span class="label label-primary label-giga">...</span>

Colors #

Override the existing colors

To change the color of a specific label, simply override its color variables. You can do this in your custom SCSS. See also how to customize the framework.


.label-primary {
    --label-background-color: var(--palette-yellow-lightest);
    --label-border-color: var(--palette-yellow-light);
    --label-color: var(--palette-yellow-darker);
}

Now the label with the label-primary modifier looks different than the default one.

Primary Primary

<span class="label label-primary">...</span>
<span class="label label-primary label-large">...</span>

Add a color

You can add a new color to the label by creating a color class in your custom SCSS and specifying the variable colors from the palette.


.label-accent {
    --label-background-color: var(--palette-yellow-base);
    --label-border-color: var(--palette-transparent);
    --label-color: var(--palette-black);
}

Now you have a new label with the specified color variables.

Default Large

<span class="label label-accent">...</span>
<span class="label label-accent label-large">...</span>

Add a color group

You can add a new color group for the label.


.label-outline.label {
    --label-background-color: var(--palette-transparent);
    --label-border-color: var(--palette-neutral-mid);
    --label-color: var(--palette-neutral-darker);
}
.label-outline.label-primary {
    --label-background-color: var(--palette-transparent);
    --label-border-color: var(--palette-primary-light);
    --label-color: var(--palette-primary-dark);
}
.label-outline.label-positive {
    --label-background-color: var(--palette-transparent);
    --label-border-color: var(--palette-positive-light);
    --label-color: var(--palette-positive-dark);
}
.label-outline.label-important {
    --label-background-color: var(--palette-transparent);
    --label-border-color: var(--palette-negative-light);
    --label-color: var(--palette-negative-dark);
}
.label-outline.label-dark {
    --label-background-color: var(--palette-transparent);
    --label-border-color: var(--palette-black-80);
    --label-color: var(--palette-black);
}
.label-outline.label-light {
    --label-background-color: var(--palette-transparent);
    --label-border-color: var(--palette-white-80);
    --label-color: var(--palette-white);
}

Here's how it might look and be used in HTML.

Default Primary Positive Important Dark Light

<span class="label label-outline">...</span>
<span class="label label-outline label-primary">...</span>
<span class="label label-outline label-positive">...</span>
<span class="label label-outline label-important">...</span>
<span class="label label-outline label-dark">...</span>
<span class="label label-outline label-light">..</span>

You can use both labels in your HTML, even at the same time.

Primary Primary

<span class="label label-primary">...</span>
<span class="label label-outline label-primary">...</span>

Variants #

Create variants

You can create your own modifiers with different label parameters. To do this, add the necessary label classes and their variables to your custom SCSS. See also how to customize the framework.


.label-rounded {
    --label-padding: 4px 12px;
    --label-border-radius: 99px;
}

In HTML it will look like this:

Positive Positive

<span class="label label-rounded label-positive">...</span>
<span class="label label-rounded label-large label-positive">...</span>

Override the existing variant

To change the default label parameters, simply specify new values for the variables in your custom SCSS.


.label {
    --label-padding: 4rem;
    --label-border-radius: var(--radius-huge);
}

Variables #

The default properties and colors of the module are shown below. These are all specified in the source of framework. This is here for clarity and to simplify modification and overriding of values.


// colors
--label-background-color: var(--palette-neutral-lighter);
--label-border-color: var(--palette-transparent);
--label-color: var(--palette-neutral-darker);

// vars
--label-font-weight: 600;
--label-font-size: var(--type-scale-12);
--label-border-radius: var(--radius-base);
--label-padding: 4px 9px;
--label-border-width: 1px;
--label-border-style: solid;
--label-text-transform: none;
--label-close-size: 10px;