Alerts

Alerts are messages that communicate information to the user. They should appear and then be dismissed by the user closing the alert.

Rules

They display an important, succinct message, and provide an action for users to take or address. They are persistent and non modal, allowing the user to ignore them or interact with them at any time. To be dismissed it requires a user action. The main message is in bold, while and description is in the default font weight. Alerts appear from the system but can only be dismissed by the user clicking the "X" to close the alert message.

Placement

Alerts are located within the main content area. They are displayed at the top of the screen below the top app bar or breadcrumbs if applicable. If an alert appears within a modal the message will appear at the top of the main body section, above the content.

Alerts stretch the entire length of the space, and are responsive. The subject of the alert message should be bold. When a alert is placed on the page it should have a margin-bottom: 1rem to create space for any element underneath it.

Alert Types

Information: provides information related to a performed action or state of the system. The information class gives this block its blue color.

Success: indicates that an action processed successfully. The success class gives this block its green color.

Error: indicates that an action failed completely. The error class gives this block its red color.

We use cookies to improve your experience. By your continued use of this site you accept such use. For more information, please see our privacy policy.

Success! You won the Wind Challenge. Click here to find out how to collect your prize.

Data Error: Your data upload failed. Take action by clicking here.

<Alert-Default>
    <b>We use cookies to improve your experience.</b> By your continued use of this site you accept such use. For more information, please see our <a href="#!">privacy policy</a>.
</Alert-Default>

<Alert-Default type="success">
    <b>Congratulations!</b> You won the Wind Challenge. <a href="#!">Click here</a> to find out how to collect your prize.
</Alert-Default>

<Alert-Default type="error">
    <b>Data Error:</b> We had trouble updating your information from you last data upload. Take action by <a href="#!">clicking here</a>.
</Alert-Default>

<template>
    <div :class="`alert alert-${type}`">
        <div :class="`alert-icon alert-icon-${type}`">
            <span class="alert-icon-alignment alert-icon-size">
                <i class="fas fa-exclamation-circle"></i>
            </span>
        </div>
        <div class="alert-text">
            <span>
                <slot>

                </slot>
            </span>
        </div>
        <div class="alert-icon">
            <span class="alert-icon-close alert-icon-size">
                <i class="fas fa-times"></i>
            </span>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            type: {default: 'information'}
        }
    }
</script>

<style scoped lang="scss">
    @import "styles/variables";

    .alert {
        padding: 0;
        border: 2px solid;
        border-radius: 4px;
        min-height: 72px;
        display: flex;
        margin-bottom: 1rem;

        &-error {
            border-color: $critical;
            background: #fff;
            color: $dark-text;
        }

        &-information {
            border-color: $primary;
            background: #fff;
            color: $dark-text;
        }

        &-success {
            border-color: $success;
            background: #fff;
            color: $dark-text;
        }

        &-icon {
            padding: 16px 24px;
            display: flex;
            align-content: center;

            &-close {
                cursor: pointer;
                flex-grow: 1;
                align-self: center;
                text-align: center;
            }

            &-alignment {
                flex-grow: 1;
                align-self: center;
                text-align: center;
            }

            &-size {
                font-size: 24px;
            }

            /*Colors*/
            @mixin icon-background($bg, $color: $light-text) {
                background: $bg;
                color: $color;
            }

            &-error {
                @include icon-background($critical);
            }

            &-information {
                @include icon-background($primary);
            }

            &-success {
                @include icon-background($success);
            }
        }

        &-text {
            align-content: center;
            align-self: center;
            flex-grow: 1;
            padding: 0 0 0 32px;
        }
    }

    @media only screen and (max-width: $lg-min - 1px) {
        .alert-text {
            padding: 16px;
        }

        .alert-icon-close {
            align-self: end;
        }
    }
</style>

# Alerts

# Rules

# Placement

# Alert Types

Alerts

Rules

Placement

Alert Types