Version 0.40.0

UI Organisms

Notification

You must use only one sui-o-notification by page where you can add multiple sui-o-notification__item.

Add as--hidden class on the sui-o-notification__item to hide element.

Default notification

Lorem ipsum dolor sit amet, consectetur adipisicing elit ! This is a link
<div class="sui-o-notification">
    <div class="sui-o-notification__item">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit ! <a href="#">This is a link</a>
        <button class="sui-o-notification__clear"></button>
    </div>
</div>

Notification colors

Lorem ipsum dolor sit amet, consectetur adipisicing elit ! This is a link
Lorem ipsum dolor sit amet, consectetur adipisicing elit ! This is a link
Lorem ipsum dolor sit amet, consectetur adipisicing elit ! This is a link
Lorem ipsum dolor sit amet, consectetur adipisicing elit ! This is a link
<div class="sui-o-notification">
    <div class="sui-o-notification__item as--primary" >
        Lorem ipsum dolor sit amet, consectetur adipisicing elit ! <a href="#">This is a link</a>
        <button class="sui-o-notification__clear"></button>
    </div>
    <div class="sui-o-notification__item as--success" >
        Lorem ipsum dolor sit amet, consectetur adipisicing elit ! <a href="#">This is a link</a>
        <button class="sui-o-notification__clear"></button>
    </div>
    <div class="sui-o-notification__item as--warning" >
        Lorem ipsum dolor sit amet, consectetur adipisicing elit ! <a href="#">This is a link</a>
        <button class="sui-o-notification__clear"></button>
    </div>
    <div class="sui-o-notification__item as--danger" >
        Lorem ipsum dolor sit amet, consectetur adipisicing elit ! <a href="#">This is a link</a>
        <button class="sui-o-notification__clear"></button>
    </div>
</div>

Notification actions

Lorem ipsum dolor sit amet, consectetur adipisicing elit ! This is a link
Lorem ipsum dolor sit amet, consectetur adipisicing elit ! This is a link
<div class="sui-o-notification">
    <div class="sui-o-notification__item">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit ! <a href="#">This is a link</a>
        <button class="sui-o-notification__clear"></button>
        <div class="sui-o-notification__actions">
          <button class="sui-o-notification__button">
              Reload browser
          </button>
          <button class="sui-o-notification__button">
              Contact support
          </button>
        </div>
    </div><div class="sui-o-notification__item as--warning">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit ! <a href="#">This is a link</a>
        <button class="sui-o-notification__clear"></button>
        <div class="sui-o-notification__actions">
          <button class="sui-o-notification__button">
              Reload browser
          </button>
        </div>
    </div>
</div>

Notification toggle

Toggle notification allow to show element 12 seconds maximum.
Use data-delay to set how long the element appears.

⚠️ Reload this page here to see animation.

Lorem ipsum dolor sit amet, consectetur adipisicing elit ! This is a link
Lorem ipsum dolor sit amet, consectetur adipisicing elit ! This is a link
Lorem ipsum dolor sit amet, consectetur adipisicing elit ! This is a link
Lorem ipsum dolor sit amet, consectetur adipisicing elit ! This is a link
<div class="sui-o-notification">
    <div class="sui-o-notification__item as--primary as--toggle" data-delay="4">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit ! <a href="#">This is a link</a>
        <button class="sui-o-notification__clear"></button>
    </div>
    <div class="sui-o-notification__item as--success as--toggle" data-delay="6">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit ! <a href="#">This is a link</a>
        <button class="sui-o-notification__clear"></button>
    </div>
    <div class="sui-o-notification__item as--warning as--toggle" data-delay="8">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit ! <a href="#">This is a link</a>
        <button class="sui-o-notification__clear"></button>
    </div>
    <div class="sui-o-notification__item as--danger as--toggle" data-delay="12">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit ! <a href="#">This is a link</a>
        <button class="sui-o-notification__clear"></button>
    </div>
</div>

Advanced examples

FL
Lorem ipsum dolor sit amet.
Loading in progress
Unstable internet connection
<div class="sui-o-notification">
    <div class="sui-o-notification__item" >
        <div class="sui-m-media-object as--middle">
            <div class="sui-m-media-object__media">
                <div class="sui-a-avatar">
                    <img src="~assets/images/ui/atoms/avatar/woman.jpg" alt="FL" />
                </div>
            </div>
            <div class="sui-m-media-object__content">
                Lorem ipsum dolor sit amet.
            </div>
        </div>
        <div class="sui-o-notification__actions">
          <button class="sui-o-notification__button">
              Read article
          </button>
        </div>
        <button class="sui-o-notification__clear"></button>
    </div>
    <div class="sui-o-notification__item">
        <span class="sui-a-loader as--start"></span>
        Loading in progress
    </div>
    <div class="sui-o-notification__item as--warning">
        <i class="sui-a-icon as--fa-exclamation-triangle as--start"></i>
        Unstable internet connection
        <button class="sui-o-notification__clear"></button>
    </div>
</div>