Message

The message allows you to create a system of notifications in your application and to call messages.

Superkube contains only CSS/SCSS and does not contain Javascript. Because Superkube is independent of the implementation, you build the environment you need.

All the javascript is just for example and to show how the modules work.

Usage #

The message is shown in the upper right corner and has the position: absolute property.

This is what HTML and different types of messages look like.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="message">...</div>
<div class="message message-success">...</div>
<div class="message message-error">...</div>

Variables #

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


// colors
--message-background-color: var(--palette-black);
--message-color: var(--palette-neutral-lightest);
--message-box-shadow: 0 20px 50px -12px var(--palette-black-40);

// vars
--message-font-size: 14px;
--message-line-height: var(--body-text-line);
--message-border-radius: var(--radius-base);
--message-level: var(--level-over-all);
--message-padding: 4rem 5rem;