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 vclNoPadding 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.