Alert

Usage

All alerts are prefixed with the alert class. This gives the element some common properties for the alert, such as margin and padding. There are three different types of alerts to choose from, take a look at below.

This is a plain alert

This is full background alert: I like alerts, they display some decent content.

Matereialstic This is a matereialstic alert

Plain

Plain alerts feature a border on the left & content. The text color is dynamically made and slightly darker than the alert itself.
You just need to label your container with the alert class and add your color by specifiying alert-{color}.

This is a default alert

This is a primary alert

This is a success alert

This is an info alert

This is a warning alert

This is a danger alert

This is a link alert

<div class="alert">
This is a default alert
</div>
<div class="alert alert-primary">
This is a primary alert
</div>
<div class="alert alert-success">
This is a success alert
</div>
<div class="alert alert-info">
This is an info alert
</div>
<div class="alert alert-warning">
This is a warning alert
</div>
<div class="alert alert-danger">
This is a danger alert
</div>
<div class="alert alert-link">
This is a link alert
</div>

Full background

To acheive a colored background, attach the alert-background class alongside alert-{color} to select the color.

This is a primary alert

This is a success alert

This is an info alert

This is a warning alert

This is a danger alert

<div class="alert alert-primary alert-background">
This is a primary alert
</div>
<div class="alert alert-success alert-background">
This is a success alert
</div>
<div class="alert alert-info alert-background">
This is an info alert
</div>
<div class="alert alert-warning alert-background">
This is a warning alert
</div>
<div class="alert alert-danger alert-background">
This is a danger alert
</div>
<div class="alert alert-link alert-background">
This is a link alert
</div>

Close

Alerts can have a close button placed on the right of the alert. The close element should be a button and be prefixed with close.
The alert-close class must be placed on the alert you intend to have the close button in. This will give padding to the right of the content.
Note: To make an alert dismissable, please see the bottom of this page.

This is a success alert with close button

This is an info alert with close button

This is a warning alert with close button

This is a danger alert with close button

<div class="alert alert-success alert-close">
This is a success alert with close button
    <button type="button" class="close" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="alert alert-info alert-close">
This is an info alert with close button
    <button type="button" class="close" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="alert alert-warning alert-close">
This is a warning alert with close button
    <button type="button" class="close" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="alert alert-danger alert-close">
This is a danger alert with close button
    <button type="button" class="close" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

Icon:

Adding any icons to alerts is easy, you can do it natively with slight margin added to separate the content. See below for an example"

Success alert: Wow, you've just won a free holiday, congratulations.

Info alert: There are some peanuts in the cabinet.

Warning alert: Please update your preferences on your account.

Danger alert: We're sorry, but all the cake has gone.

<div class="alert alert-danger alert-close alert-background">
    <i class="far fa-angry mr-2"></i>
    <strong>Danger alert:</strong>
    We're sorry, but all the cake has gone.
    <button type="button" class="close" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>

Materialistic:

You can design matereialstic looking cards without any need of any additional classes easy as that, take a look at the notation below and copy if you like the look of it!
Note: You are not limited to the primary color, you can use any in your palette.

Added to cart The item was added to the shopping cart.

Message sent Your message has been sent, thanks for reaching out!

<div class="alert alert-white alert-close alert-background py-0 pl-0 d-flex align-items-center">
    <div class="bg-primary p-4 mr-3">
        <i class="fas fa-shopping-cart c-white"></i>
    </div>
    <div class="d-flex flex-column justify-content-center">
        <strong>Added to cart</strong>
        <span>The item was added to the shopping cart.</span>
    </div>
    <button type="button" class="close mx-4 p-0" aria-label="Close">
        <span class="c-primary" aria-hidden="true">&times;</span>
    </button> 
</div>

CSS alert dismiss

You can use pure CSS to dismiss an alert, the markup is slightly different but it's easy to implement and your build becomes lighter.

Notation:

The alert-container element must be the parent for both the alert and the checkbox.
The checkbox should be placed before the alert in the DOM
The id for the checkbox and the name of the label must match.

Example:

Go ahead and click the close button to dismiss the alerts.

This is a success alert with close button functionality

This is an info alert with close button functionality

This is a warning alert with close button functionality

This is a danger alert with close button functionality

<div class="alert-container">
    <input type="checkbox" class="alert-toggle" id="alertdismiss1">
    <div class="alert alert-success alert-background alert-close">
        This is a success alert with close button functionality
        <label for="alertdismiss1" class="close" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </label>
    </div>
</div>

JS alert dismiss

mesh doesnt ship with any JS, but you can use the following function to dismiss the alerts. This script adds an event listener to all the close buttons.

document.addEventListener('DOMContentLoaded', () => {
    (document.querySelectorAll('.alert .close') || []).forEach((close) => {
        close.addEventListener('click', () => {
            close.parentNode.remove();
        });
    });
});