VCL notification

Notification messages for events.

Features

The notifications may have header, a body and a footer while the latter both are optional. They can semantically colored through modifiers.

Usage

Nested lists are also possible as shown in the warning-example. If no icon is needed, you can remove it and assign vclP-0 to vclNotificationContent to remove the space on the left.

Basic (no modifier).

basic example

Info.

info example

Warning.

warning example

Error.

error example

Success.

success example

Classes

• vclNotification
• vclNotificationIconContainer
• vclNotificationIcon
• vclNotificationHeader
• vclNotificationContent
• vclNotificationFooter

Modifiers

Semantic coloring:

• vclSuccess
• vclInfo
• vclWarning
• vclError

Variables

• --notification-border-radius
• --notification-color
• --notification-bg-color
• --notification-hf-color
• --notification-hf-bg-color
• --notification-success-color
• --notification-success-bg-color
• --notification-success-hf-color
• --notification-success-hf-bg-color
• --notification-info-color
• --notification-info-bg-color
• --notification-info-hf-color
• --notification-info-hf-bg-color
• --notification-warning-color
• --notification-warning-bg-color
• --notification-warning-hf-color
• --notification-warning-hf-bg-color
• --notification-error-color
• --notification-error-bg-color
• --notification-error-hf-color
• --notification-error-hf-bg-color

Demo

example.html on GH-pages.