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).
Info.
Warning.
Error.
Success.
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.