Notification

Hi

This is a notification

A notifying component to display messages to the corner of page

Properties#

NameDescription
.notification The notification component
.notification-container The notification container component to hold its children components with a default max-width of 960px
.notification-title The notification content title.

.top-left

.top-center

.top-right

.bottom-left

.bottom-center

.bottom-right

 The position of the notification component to the page

.open

:target

 The switch to control notification open/close


Features#

default#

The default notification container's background color is transparent. You may paint the color yourself.





<div class="notification">
  <div class="notification-container bg-white rounded-sm shadow-lg open">
    <div class="notification-title">
      <!-- title -->
    </div>
    <!-- content -->
  </div>
</div>

stack#

Notifications can stack up if there are multiple ones to display



<div class="notification">
  <!-- First notification -->
  <div class="notification-container bg-white rounded-sm shadow-lg open">
    <div class="notification-title">
      <!-- title -->
    </div>
    <!-- content -->
  </div>

  ...

  <!-- Last Notification -->
  <div class="notification-container bg-white rounded-sm shadow-lg open">
    <div class="notification-title">
      <!-- title -->
    </div>
    <!-- content -->
  </div>
</div>