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>

Here are examples of the use of close in different modules.

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

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

Size #

The close module has a different size modifiers by default:

• small - 10px
• medium - 12px
• base - 14px
• large - 16px
• huge - 20px

<span class="close close-small"></span>
<span class="close close-medium"></span>
<span class="close"></span>
<span class="close close-large"></span>
<span class="close close-huge"></span>

Variants #

Use close-strong to make the close thickness 2px.

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

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-mega {
    --close-size: 32px;
    --close-thickness: 3px;
}

In HTML it will look like this:

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

Variables #

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

// colors
--close-color: currentColor;

// params
--close-size: 14px;
--close-thickness: 1px;