... LOADING ...

Notifications
Static Notifications
-
Notifications can be used to show users short meaningful meassages about anything. Combine these with the various backgrounds to display general intentions
15h
New Like
Tocarra liked your post
20d
New Like
Tocarra liked your post
Generic
Generic message
You have a new consultation request from Tocarra with coloured text
            
<div class="jca-card-notification">
  <span class="jca-card-notification__extra">
    <ion-icon name="close-circle-outline"></ion-icon>
  </span>
  <div class="jca-card-notification__icon">
    <ion-icon name="heart-outline"></ion-icon>
    <span class="jca-card-notification__time">15h</span>
  </div>
  <div class="jca-card-notification__content">
    <div class="jca-card-notification__title">New Like</div>
    <div class="jca-card-notification__message">
      Tocarra liked your post
    </div>
  </div>
</div>

<div class="jca-card-notification bg-danger text-light">
  <div class="jca-card-notification__icon">
    <ion-icon name="heart-outline"></ion-icon>
    <span class="jca-card-notification__time">20d</span>
  </div>
  <div class="jca-card-notification__content">
    <div class="jca-card-notification__title">New Like</div>
    <div class="jca-card-notification__message">
    T ocarra liked your post
    </div>
  </div>
</div>

<div class="jca-card-notification">
  <div class="jca-card-notification__content">
    <div class="jca-card-notification__title">Generic</div>
    <div class="jca-card-notification__message">
      Generic message
    </div>
  </div>
</div>

<div class="jca-card-notification text-danger">
  <div class="jca-card-notification__icon">
    <ion-icon name="today-outline"></ion-icon>
  </div>
  <div class="jca-card-notification__content">
    <div class="jca-card-notification__message">
      You have a new consultation request from Tocarra with coloured text
    </div>
  </div>
</div>