Alert

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.

// 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>
    ...
</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">
            <p>...</p>
        </div>
    </div>
</div>

Scales #

By default, alert has only one font size scale. This can be changed by extending the type scale for this module. See also how to work with text size scales for modules.

// =Scales
$scales: map-extend($scales, (
    type: (
        alert: (
            small: 13px,
            large: 21px
        )
    )
));

In this case, Superkube will automatically generate alert-small and alert-large text size modifiers.

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

Colors #

For the alert module, you can add a new color, override existing colors, add a new color group. See also how to work with colors for modules.

Add color

To add a new color for a module, first make sure that it is in the color palette. If not, add a new color to $palette.

// =Palette
$palette: map-extend($palette, (
    yellow: (
        darker: #816A13,
        base: #FFBB00,
        lighter: #FFF6E0
    )
));

Now extend the $colors of the module with a new modifier and add colors from the palette.

// =Colors
$colors: map-extend($colors, (
    alert: (
        default: (
            note: (
                background-color: palette(yellow, lighter),
                color: palette(yellow, darker)
            )
        )
    )
));

That's all. Now Superkube will automatically generate a new alert-note color modifier.

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

Override existing colors

Any default color in a module can be overridden. Also see that we added the alert border color to show how easy it is to override any module colors.

// =Colors
$colors: map-extend($colors, (
    alert: (
        default: (
            info: (
                background-color: palette(yellow, lighter),
                color: palette(yellow, darker),
                border-color: rgba(palette(yellow, base), .6)
            )
        )
    )
));

Note: You must first add a color to the palette if it's not already there, and only then use the colors from the palette in $colors. Here's more on how to work with colors in Superkube.

Now the alert with the alert-info modifier looks different than the default one. It has a yellow background and border.

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

Add color group

You can add a complete group of colors to a module, not just one modifying color. This can be useful if you use different variants of alerts in your design for various cases.

To add a new color group, extend $colors by specifying the name of the modifier group and the modifiers themselves. Let's say we want to make alerts with full color, bright and juicy.

// =Colors
$colors: map-extend($colors, (
    alert: (
        fill: (
            base: (
                background-color: palette(black),
                color: palette(neutral, lightest)
            ),
            info: (
                background-color: palette(active, base),
                color: palette(active, lightest)
            ),
            success: (
                background-color: palette(positive, base),
                color: palette(white)
            ),
            error: (
                background-color: palette(negative, base),
                color: palette(negative, lightest)
            )
        )
    )
));

Now Superkube will automatically generate a new group of alerts with alert-fill modifier.

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

In Superkube you can easily create module modifiers, which will be automatically generated from the variables. See also how to work with variants for modules.

Add new variant

To add a new variant of a module, extend $variants and specify variants with those CSS properties that should be different from the default.

// =Variants
$variants: map-extend($variants, (
    alert: (
        small: (
            padding: 3rem,
            border-radius: radius(small)
        ),
        strong: (
            font-weight: bold,
            border-radius: radius(giga)
        )
    )
));

In this case Superkube will automatically generate alert-strong and alert-small classes, with the properties specified in the variables. Now you have modifiers, with which you can quickly add or change the appearance of the module.

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

Override existing variant

In addition to creating a new variant, you can override the existing default appearance for module. Extend $variants with the new default alert properties.

// =Variants
$variants: map-extend($variants, (
    alert: (
        default: (
            padding: 10rem,
            border-radius: radius(huge)
        )
    )
));

Variables #

The default properties and colors of the module are shown below. These are all specified in the source SCSS variables. This is here for clarity and to simplify modification and overriding of values

// =Type
$scales: (
    type: (
        alert: (
            default: 14px
        )
    )
);

// =Colors
$colors: (
    alert: (
        default: (
            base: (
                background-color: palette(neutral, lighter),
                color: palette(neutral, darker)
            ),
            info: (
                background-color: palette(active, lighter),
                color: palette(active, darker)
            ),
            success: (
                background-color: palette(positive, lighter),
                color: palette(positive, darker)
            ),
            error: (
                background-color: palette(negative, lighter),
                color: palette(negative, darker)
            )
        )
    )
);

// =Variants
$variants: (
    alert: (
        default: (
            padding: 4rem 5rem,
            border-radius: radius(base),
            border: 1px solid transparent
        )
    )
);