Label

Usage #

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

<span class="label">...</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.

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

Size #

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 {
    --label-font-size: 18px;
}
.label-giga {
    --label-font-size: 28px;
}

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

<span class="label">...</span>
<span class="label 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 {
    --label-background-color: var(--palette-yellow-lightest);
    --label-border-color: var(--palette-yellow-light);
    --label-color: var(--palette-yellow-darker);
}

Now the label looks different than the default one.

<span class="label">...</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: transparent;
    --label-color: var(--palette-black);
}

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

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

Add a color group

You can add a new color group for the label.

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

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

<span class="label label-outline">...</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.

<span class="label label-dark">...</span>
<span class="label label-outline label-dark">...</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:

<span class="label label-rounded">...</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 #

Here are the CSS variables used in the module. Setting them allows you to change the appearance and parameters of the module.

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

// params
--label-font-size: 12px;
--label-font-weight: var(--font-weight-semibold);
--label-border-radius: var(--radius-medium);
--label-padding: 6px 10px;
--label-border-width: 1px;
--label-border-style: solid;
--label-text-transform: none;
--label-close-size: 10px;
--label-close-space: 3px;