Modules

Alert

Helps to display feedback messages or show a note in the content.

Usage #

By default, alert module has the alert class and several color modifiers to show typical feedback messages in different states. It is recommended that you always wrap the text with a paragraph tag for semantics and proper structure.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


// 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.

Yeah! Service is available.

Now you can download your application. Download


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<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.

Oh no! Service is no available.

Now you cannot download your application.

<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.

Yeah! Service is available.

Now you can download your application. Download

<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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


<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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<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: var(--type-scale-13);
    --alert-padding: 3rem;
    --alert-border-radius: var(--radius-base);
}
.alert-large {
    --alert-font-size: var(--type-scale-20);
}
.alert-strong {
    --alert-font-weight: bold;
    --alert-border-radius: var(--radius-giga);
}

In HTML it will look like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


<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 #

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.


// vars
--alert-padding: 4rem 5rem;
--alert-font-weight: normal;
--alert-border-radius: var(--radius-base);
--alert-border-width: 1px;
--alert-border-style: solid;
--alert-font-size: var(--type-scale-14);
--alert-line-height: var(--body-text-line);
--alert-close-size: 14px;

// default
--alert-background-color: var(--palette-neutral-lighter);
--alert-border-color: var(--palette-transparent);
--alert-color: var(--palette-neutral-darker);

// info
--alert-background-color: var(--palette-active-lightest);
--alert-border-color: var(--palette-transparent);
--alert-color: var(--palette-active-darker);

// success
--alert-background-color: var(--palette-positive-lightest);
--alert-border-color: var(--palette-transparent);
--alert-color: var(--palette-positive-darker);

// error
--alert-background-color: var(--palette-negative-lightest);
--alert-border-color: var(--palette-transparent);
--alert-color: var(--palette-negative-darker);