Label

Usage #

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

<span class="tag">...</span>
<span class="tag tag-primary">...</span>
<span class="tag tag-positive">...</span>
<span class="tag tag-important">...</span>
<span class="tag tag-dark">...</span>
<span class="tag tag-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="tag">
    Label
    <span class="close"></span>
</span>

Scales #

By default, labels come in several sizes.

• default
• large

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

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

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

<span class="tag tag-primary tag-large">...</span>
<span class="tag tag-primary tag-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.

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

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

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

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

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

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

Add a color group

You can add a new color group for the label.

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

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

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

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

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

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

In HTML it will look like this:

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

Override the existing variant

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

.tag {
    --tag-padding: 4rem;
    --tag-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
--tag-background-color: var(--palette-neutral-lighter);
--tag-border-color: var(--palette-transparent);
--tag-color: var(--palette-neutral-darker);

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