$0.00 Cart (0)
You currently have 0 items in your cart
Subtotal (inc GST)
Charges
Discounts
-
Freight
No Charge
Requires Quote
Total (inc GST)
Including GST
Discounts (inc GST)
-
Giftcard Total
Net Owing
Checkout
Your Store:
Set
Back

Notification Messages

E-Commerce User Interface Elements

Alert Messages (Full Width)

Alert messages to alert the user. These will fill the full with of the containing element.

This is a generic alert message.
This is a information alert message.
This is a success alert message.
This is a warning alert message.
This is an error alert message.
 
HTML Example
                                                <div class="alert-box cv-ico-general-info2">
    This is a generic alert message.
    <a href="" class="close-alert"></a>
</div>
<div class="alert-box info">
    This is a information alert message.
    <a href="" class="close-alert"></a>
</div>
<div class="alert-box success">
    This is a success alert message.
    <a href="" class="close-alert"></a>
</div>
<div class="alert-box warning">
    This is a warning alert message.
    <a href="" class="close-alert"></a>
</div>
<div class="alert-box error">
    This is an error alert message.
    <a href="" class="close-alert"></a>
</div>

Alert Messages (Inline)

Alert messages to alert the user. These will dispaly inline with other elements, making use of the space provided.

This is a generic alert message.
This is a information alert message.
This is a success alert message.
This is a warning alert message.
This is an error alert message.
 
HTML Example
                                                <div class="alert-box inline-alert cv-ico-general-info2">
    This is a generic alert message.
    <a href="" class="close-alert"></a>
</div>
<div class="alert-box inline-alert info">
    This is a information alert message.
    <a href="" class="close-alert"></a>
</div>
<div class="alert-box inline-alert success">
    This is a success alert message.
    <a href="" class="close-alert"></a>
</div>
<div class="alert-box inline-alert warning">
    This is a warning alert message.
    <a href="" class="close-alert"></a>
</div>
<div class="alert-box inline-alert error">
    This is an error alert message.
    <a href="" class="close-alert"></a>
</div>

Alert Notifications

Notifications to alert the user. These are fixed position overlayed.

Standard Notification Heading This is a general notification
Info Notification Heading This is a general notification
Confirm
Success Notification Heading This is a success notification
Confirm
Warning Notification Heading This is a warning notification
Confirm
Error Notification Heading This is a error notification
Confirm
This is a general notification which has no heading This is a general notification which has no heading This is a general notification which has no heading (multiline)
This is a notification (single)
HTML Example
                                                <!-- Notifications -->
<div class="cv-notification-area">

<!-- Standard Alert -->
<div class="cv-notification">
    <div class="notification-icon"></div>
    <div class="notification-content">
        <span class="notification-heading">Standard Notification Heading</span>
        <span class="notification-message">This is a general notification</span>
        <div class="notification-actions">
            <a href="" class="btn small">Confirm</a>
        </div>
    </div>
</div>

<!-- Info Alert -->
<div class="cv-notification info">
    <div class="notification-icon"></div>
    <div class="notification-content">
        <span class="notification-heading">Info Notification Heading</span>
        <span class="notification-message">This is a general notification</span>
        <div class="notification-actions">
            <a href="" class="btn small">Confirm</a>
        </div>
    </div>
</div>

<!-- Error Alert -->
<div class="cv-notification error">
    <div class="notification-icon"></div>
    <div class="notification-content">
        <span class="notification-heading">Error Notification Heading</span>
        <span class="notification-message">This is a error notification</span>
        <div class="notification-actions">
            <a href="" class="btn small">Confirm</a>
        </div>
    </div>
</div>

<!-- Success Alert -->
<div class="cv-notification success">
    <div class="notification-icon"></div>
    <div class="notification-content">
        <span class="notification-heading">Success Notification Heading</span>
        <span class="notification-message">This is a success notification</span>
        <div class="notification-actions">
            <a href="" class="btn small">Confirm</a>
        </div>
    </div>
</div>

<!-- Warning Alert -->
<div class="cv-notification warning">
    <div class="notification-icon"></div>
    <div class="notification-content">
        <span class="notification-heading">Warning Notification Heading</span>
        <span class="notification-message">This is a warning notification</span>
        <div class="notification-actions">
            <a href="" class="btn small">Confirm</a>
        </div>
    </div>
</div>
</div>
Please upgrade your internet browser for a secure online shopping experience.