Utilities

18.1 #Notification.bottom-up Notification with bottom up

.sf-notification.-info.-up

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi. Donec faucibus commodo lacus, quis laoreet nulla. Ut et neque quis tortor dapibus consequat.

Html

    <div class="sf-notification -info -up">
         <div class="sf-notification__content">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi. Donec faucibus commodo lacus, quis laoreet nulla. Ut et neque quis tortor dapibus consequat.
         </div>
     </div>

18.2 #Notification.default info Notification

.sf-notification.-info

Curabitur sem nulla

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tristique elit. Curabitur sem nulla, porttitor sit amet pretium luctus.

Html

    <div class="sf-notification -transparent">
        <div class="sf-notification__content">
            <h4>Curabitur sem nulla</h4>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tristique elit. Curabitur sem nulla, porttitor sit amet pretium luctus.
        </div>
    </div>

18.2 #Notification.default success Notification

.sf-notification.-success

Curabitur sem nulla

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tristique elit. Curabitur sem nulla, porttitor sit amet pretium luctus.

Html

    <div class="sf-notification -transparent">
        <div class="sf-notification__content">
            <h4>Curabitur sem nulla</h4>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tristique elit. Curabitur sem nulla, porttitor sit amet pretium luctus.
        </div>
    </div>

18.2 #Notification.default error Notification

.sf-notification.-error

Curabitur sem nulla

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tristique elit. Curabitur sem nulla, porttitor sit amet pretium luctus.

Html

    <div class="sf-notification -transparent">
        <div class="sf-notification__content">
            <h4>Curabitur sem nulla</h4>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tristique elit. Curabitur sem nulla, porttitor sit amet pretium luctus.
        </div>
    </div>

18.2 #Notification.default warning Notification

.sf-notification.-warning

Curabitur sem nulla

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tristique elit. Curabitur sem nulla, porttitor sit amet pretium luctus.

Html

    <div class="sf-notification -transparent">
        <div class="sf-notification__content">
            <h4>Curabitur sem nulla</h4>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tristique elit. Curabitur sem nulla, porttitor sit amet pretium luctus.
        </div>
    </div>

18.2 #Notification.default black Notification

.sf-notification.-black

Curabitur sem nulla

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tristique elit. Curabitur sem nulla, porttitor sit amet pretium luctus.

Html

    <div class="sf-notification -transparent">
        <div class="sf-notification__content">
            <h4>Curabitur sem nulla</h4>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tristique elit. Curabitur sem nulla, porttitor sit amet pretium luctus.
        </div>
    </div>

18.2 #Notification.default transparent Notification

.sf-notification.-transparent

Curabitur sem nulla

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tristique elit. Curabitur sem nulla, porttitor sit amet pretium luctus.

Html

    <div class="sf-notification -transparent">
        <div class="sf-notification__content">
            <h4>Curabitur sem nulla</h4>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tristique elit. Curabitur sem nulla, porttitor sit amet pretium luctus.
        </div>
    </div>

18.3 #Notification.edit-item Edit item notification

.sf-notification.-success.-fixed.-inline

Content has been published successfully.

Html

    <div class="sf-notification -success -fixed -inline">
  	<div class="sf-notification__close-button"><i class="sf-icon sf-fa sf-fa-times -size-3xs -darkest"></i></div>
  	<div class="sf-notification__content">
  		Content has been published successfully.
  	</div>
   </div>

18.4 #Notification.inline Inline notification (as wide as the content in it)

.sf-notification.-inline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tristique elit. Curabitur sem nulla, porttitor sit amet pretium luctus.

Html

    <div class="sf-notification -info -inline">
        <span class="sf-notification__close-button"></span>
        <div class="sf-notification__content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tristique elit. Curabitur sem nulla, porttitor sit amet pretium luctus.
        </div>
    </div>

18.5 #Notification.left-arrow Notification with left arrow

.sf-notification.-info.-right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi. Donec faucibus commodo lacus, quis laoreet nulla. Ut et neque quis tortor dapibus consequat.

Html

    <div class="sf-notification -info -right">
         <div class="sf-notification__content">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi. Donec faucibus commodo lacus, quis laoreet nulla. Ut et neque quis tortor dapibus consequat.
         </div>
     </div>

18.6 #Notification.loader-big Notification with top arrow

.sf-notification.-info.-down

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi. Donec faucibus commodo lacus, quis laoreet nulla. Ut et neque quis tortor dapibus consequat.

Html

    <div class="sf-notification -info -down">
         <div class="sf-notification__content">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi. Donec faucibus commodo lacus, quis laoreet nulla. Ut et neque quis tortor dapibus consequat.
         </div>
     </div>

18.7 #Notification.right-arrow Notification with right arrow

.sf-notification.-info.-left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi. Donec faucibus commodo lacus, quis laoreet nulla. Ut et neque quis tortor dapibus consequat.

Html

    <div class="sf-notification -info -left">
         <div class="sf-notification__content">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi. Donec faucibus commodo lacus, quis laoreet nulla. Ut et neque quis tortor dapibus consequat.
         </div>
     </div>

18.8 #Notification.toolset-for-link Notification as toolset for link

.sf-notification.-toolset.-black.-down

https://drive.google.com/drive/folders/

Html

    <div class="sf-notification -black -toolset -down">
         <div class="sf-notification__content">
             <span class="sf-notification__tool-link" title="Open link: https://drive.google.com/drive/folders/">https://drive.google.com/drive/folders/</span>
             <span class="sf-notification__tool-button"><i class="sf-icon -color-inherit -size-xs sf-fa sf-fa-external-link"></i></span>
             <span class="sf-notification__tool-separator"></span>
             <span class="sf-notification__tool-button"><i class="-color-inherit -size-xs sf-icon sf-fa sf-fa-pencil"></i></span>
             <span class="sf-notification__tool-separator"></span>
             <span class="sf-notification__tool-button"><i class="-color-inherit -size-xs sf-icon sf-fa sf-fa-unlink"></i></span>
         </div>
     </div>

18.9 #Notification.toolset-for-other-objects Notification as toolset for other objects

.sf-notification.-toolset.-black.-up

Html

    <div class="sf-notification -black -toolset -up">
         <div class="sf-notification__content">
             <span class="sf-notification__tool-group">
                  <span class="sf-notification__tool-button">
                      <i class="-color-inherit -size-xs sf-icon sf-fa sf-fa-align-left"></i>
                  </span>
                  <span class="sf-notification__tool-button">
                      <i class="-color-inherit -size-xs sf-icon sf-fa sf-fa-align-center"></i>
                  </span>
                  <span class="sf-notification__tool-button -active">
                      <i class="-color-inherit -size-xs sf-icon sf-fa sf-fa-align-right"></i>
                  </span>
             </span>
             <span class="sf-notification__tool-separator"></span>
             <span class="sf-notification__tool-button"><i class="-color-inherit -size-xs sf-icon sf-fa sf-fa-link"></i></span>
             <span class="sf-notification__tool-separator"></span>
             <span class="sf-notification__tool-button"><i class="-color-inherit -size-xs sf-icon sf-fa sf-fa-paint-brush"></i></span>
             <span class="sf-notification__tool-separator"></span>
             <span class="sf-notification__tool-button"><i class="-color-inherit -size-xs sf-icon sf-fa sf-fa-pencil"></i></span>
         </div>
     </div>

18.10 #Notification.toolset-for-styles-menu Notification as toolset for styles menu

.sf-notification.-toolset.-black.-down

Link Style

Html

    <div class="sf-notification -black -toolset -down">
         <div class="sf-notification__content">
             <label class="sf-notification__tool-link">Link Style</label>
              <select class="sf-notification__tool-dropdown">
                  <option selected>No style</option>
                  <option value="sf-button -action -large">Big call action</option>
                  <option value="sf-button -small">Small button</option>
              </select>
         </div>
     </div>

18.11 #Notification.tooltip Notification as tooltip

.sf-notification.-tooltip

Html

    <div class="sf-notification -tooltip">
         <div class="sf-notification__content">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi. Donec faucibus commodo lacus, quis laoreet nulla. Ut et neque quis tortor dapibus consequat.
         </div>
     </div>

18.12 #Notification.tooltip-with-down-arrow Notification as tooltip with down arrow

.sf-notification.-tooltip.-down

Html

    <div class="sf-notification -tooltip -down">
         <div class="sf-notification__content">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi. Donec faucibus commodo lacus, quis laoreet nulla. Ut et neque quis tortor dapibus consequat.
         </div>
     </div>

18.13 #Notification.tooltip-with-left-arrow Notification as tooltip with left arrow

.sf-notification.-tooltip.-left

Html

    <div class="sf-notification -tooltip -left">
         <div class="sf-notification__content">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi. Donec faucibus commodo lacus, quis laoreet nulla. Ut et neque quis tortor dapibus consequat.
         </div>
     </div>

18.14 #Notification.tooltip-with-right-arrow Notification as tooltip with right arrow

.sf-notification.-tooltip.-right

Html

    <div class="sf-notification -tooltip -right">
         <i class="sf-notification__close-button sf-icon -close -black -size-2xs"></i>
         <div class="sf-notification__content">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi. Donec faucibus commodo lacus, quis laoreet nulla. Ut et neque quis tortor dapibus consequat.
         </div>
     </div>

18.15 #Notification.tooltip-with-top-right-arrow Notification as tooltip with top right arrow and close button

.sf-notification.-tooltip.-down-right

Html

    <div class="sf-notification -tooltip -down-right">
         <i class="sf-notification__close-button sf-icon -close -black -size-2xs"></i>
         <div class="sf-notification__content">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi. Donec faucibus commodo lacus, quis laoreet nulla. Ut et neque quis tortor dapibus consequat.
         </div>
     </div>

18.16 #Notification.tooltip-with-up-arrow Notification as tooltip with up arrow

.sf-notification.-tooltip.-up

Html

    <div class="sf-notification -tooltip -up">
         <i class="sf-notification__close-button sf-icon -close -black -size-2xs"></i>
         <div class="sf-notification__content">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus, erat sed elementum aliquam, libero nibh aliquam lacus, sollicitudin accumsan justo nibh eu nisi. Donec faucibus commodo lacus, quis laoreet nulla. Ut et neque quis tortor dapibus consequat.
         </div>
     </div>

18.17 #Notification.with-close * info notification with close button

.sf-notification.-success

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tristique elit. Curabitur sem nulla, porttitor sit amet pretium luctus.

Html

     <div class="sf-notification -success">
         <span class="sf-notification__close-button"></span>
         <div class="sf-notification__content">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tristique elit. Curabitur sem nulla, porttitor sit amet pretium luctus.
         </div>
     </div>

18 #Notification Notification

18.1 #Notification.bottom-up Notification with bottom up

18.2 #Notification.default info Notification

Curabitur sem nulla

18.2 #Notification.default success Notification

Curabitur sem nulla

18.2 #Notification.default error Notification

Curabitur sem nulla

18.2 #Notification.default warning Notification

Curabitur sem nulla

18.2 #Notification.default black Notification

Curabitur sem nulla

18.2 #Notification.default transparent Notification

Curabitur sem nulla

18.3 #Notification.edit-item Edit item notification

18.4 #Notification.inline Inline notification (as wide as the content in it)

18.5 #Notification.left-arrow Notification with left arrow

18.6 #Notification.loader-big Notification with top arrow

18.7 #Notification.right-arrow Notification with right arrow

18.8 #Notification.toolset-for-link Notification as toolset for link

18.9 #Notification.toolset-for-other-objects Notification as toolset for other objects

18.10 #Notification.toolset-for-styles-menu Notification as toolset for styles menu

18.11 #Notification.tooltip Notification as tooltip

18.12 #Notification.tooltip-with-down-arrow Notification as tooltip with down arrow

18.13 #Notification.tooltip-with-left-arrow Notification as tooltip with left arrow

18.14 #Notification.tooltip-with-right-arrow Notification as tooltip with right arrow

18.15 #Notification.tooltip-with-top-right-arrow Notification as tooltip with top right arrow and close button

18.16 #Notification.tooltip-with-up-arrow Notification as tooltip with up arrow

18.17 #Notification.with-close * info notification with close button