Alert

Usage #

By default, alert module has the alert class and several color modifiers to show typical feedback messages in different states.

// base
<div class="alert">
    <p>...</p>
</div>

// info
<div class="alert alert-info">
    <p>...</p>
</div>

// success
<div class="alert alert-success">
    <p>...</p>
</div>

// error
<div class="alert alert-error">
    <p>...</p>
</div>

Content #

You can place any content and even other modules inside the alert. Links and headers inherit the color of the alert text.

<div class="alert alert-success">
    <h3>...</h3>
    <p>...</p>
    <hr>
    <p>...</p>
</div>

Close #

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

Note: Superkube is a javascript-agnostic framework, so it does not provide a way to hide the alert when you click the close icon.

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

Icon #

There can be an svg icon inside the alert. To place it you can use standard Superkube modules for structure markup, for example, flex. See also the icon module to know how icons are built.

<div class="alert alert-info">
    <span class="close" data-type="close"></span>
    <div class="alert-box flex">
        <div class="alert-icon mt-1 mr-3">
            <span class="icon icon-24">
                <svg></svg>
            </span>
        </div>
        <div class="alert-content">
            <h4>...</h4>
            <p>...</p>
        </div>
    </div>
</div>

Colors #

Override the existing colors

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

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

Now the alert with the alert-info modifier looks different than the default one.

<div class="alert alert-info">
    <p>...</p>
</div>

Add a color

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

.alert-note {
    --alert-background-color: var(--palette-yellow-lighter);
    --alert-color: var(--palette-yellow-darker);
}

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

<div class="alert alert-note">
    <p>...</p>
</div>

Add a color group

You can add a new color group for the alert.

.alert-fill.alert {
    --alert-background-color: var(--palette-black);
    --alert-color: var(--palette-neutral-lightest);
}
.alert-fill.alert-info {
    --alert-background-color: var(--palette-active-base);
    --alert-color: var(--palette-active-lightest);
}
.alert-fill.alert-success {
    --alert-background-color: var(--palette-positive-base);
    --alert-color: var(--palette-positive-lightest);
}
.alert-fill.alert-error {
    --alert-background-color: var(--palette-negative-base);
    --alert-color: var(--palette-negative-lightest);
}

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

<div class="alert alert-fill">
    <p>...</p>
</div>

<div class="alert alert-fill alert-info">
    <p>...</p>
</div>

<div class="alert alert-fill alert-success">
    <p>...</p>
</div>

<div class="alert alert-fill alert-error">
    <p>...</p>
</div>

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

<div class="alert alert-info">
    <p>...</p>
</div>
<div class="alert alert-fill alert-info">
    <p>...</p>
</div>

Variants #

Create variants

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

.alert-small {
    --alert-font-size: 13px;
    --alert-padding: 3rem;
    --alert-border-radius: var(--radius-base);
}
.alert-large {
    --alert-font-size: 20px;
}
.alert-strong {
    --alert-font-weight: bold;
    --alert-border-radius: var(--radius-huge);
}

In HTML it will look like this:

<div class="alert alert-small alert-info">
    <p>...</p>
</div>
<div class="alert alert-large alert-success">
    <p>...</p>
</div>
<div class="alert alert-strong alert-error">
    <p>...</p>
</div>

Override the existing variant

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

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

// params
--alert-padding: 4rem 5rem;
--alert-font-size: 14px;
--alert-font-weight: normal;
--alert-line-height: var(--body-text-line);
--alert-border-radius: var(--radius-base);
--alert-border-width: 1px;
--alert-border-style: solid;
--alert-box-shadow: none;
--alert-close-size: 14px;
--alert-space: 0.5em;