18 #Notification Notification

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.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>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.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 -info">
        <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>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.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 -info">
        <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>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.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 -info">
        <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>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.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 -info">
        <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>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.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 -info">
        <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>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.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 -info">
        <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>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.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>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.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>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.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>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.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>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.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>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.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>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

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

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

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.sf-notification.-tooltip

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 -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>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.sf-notification.-tooltip.-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 -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>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.sf-notification.-tooltip.-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 -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>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.sf-notification.-tooltip.-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 -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>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.sf-notification.-tooltip.-down-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 -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>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.sf-notification.-tooltip.-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 -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>

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

.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>