Close

Usage #

To show a close icon, you need to place a span tag with the close class in an element.

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

Close icon is built-in to the Superkube as a font, so that the icon takes on the color and font-weight of the element.

<span class="tag">Label <span class="close"></span></span>
<span class="tag tag-dark">Label <span class="close"></span></span>

<div class="alert alert-error">
    <span class="close" data-type="close"></span>
    ...
</div>

Variants #

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

.close-large {
    --close-size: 32px;
}

In HTML it will look like this:

<span class="close close-large"></span>

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.

--close-size: 1em;