• Typography
  • Buttons
  • Inputs
  • Controls
  • Navigation
  • Notifications
  • Boxes
  • Tables
  • Icons
  • Media
  • Components
    • Generic
    • Showcase
    • View the code This is a Simple Alert Message
       
      <span class="message-alert">This is a Simple Alert Message</span>
    • View the code You have 3 errors waiting to be fixed
       
      <span class="message-alert">You have 3 errors waiting to be fixed</span>
    • Generic
    • Showcase
    • View the code this component uses the legacyModal function which you can find in the js/main.js file from your framework root directory
      This is a Simple Modal Alert Message
       
      <div class="box">
          <span class="message-modal alert">This is a Simple Modal Alert Message <span class="tooltip icon right" title="Close this box"></span></span>
      </div>
    • View the code
      You have 3 errors waiting to be fixed
       
      <div class="box">
          <span class="message-modal alert">You have 3 errors waiting to be fixed <span class="tooltip icon right" title="Close this box"></span></span>
      </div>
  • View the code This is a Simple Alert Message with Icon
     
    <span class="message-alert with-icon">This is a Simple Alert Message with Icon <span class="icon right"></span></span<
  • View the code This is a Simple Alert Message with Icon and Transparency
     
    <span class="message-alert with-icon transparency">This is a Simple Alert Message with Icon and Transparency <span class="icon right"></span></span>
  • View the code This is a Simple Warning Message with Icon
     
    <span class="message-warning with-icon">This is a Simple Warning Message with Icon <span class="icon right"></span></span>
  • View the code This is a Simple Error Message with Icon
     
    <span class="message-error with-icon">This is a Simple Error Message with Icon <span class="icon right"></span></span>
  • View the code This is a Simple Info Message with Icon
     
    <span class="message-info with-icon">This is a Simple Info Message with Icon <span class="icon right"></span></span>
  • View the code This is a Simple OK Message with Icon
     
    <span class="message-ok with-icon">This is a Simple OK Message with Icon <span class="icon right"></span></span>
  • View the code This is a Simple Neutral Message
     
    <span class="message">This is a Simple Neutral Message</span>
  • View the code This is a Simple Thin Message
     
    <span class="message thin">This is a Simple Thin Message</span>
  • View the code This is an In-box Message
     
    <span class="message in-box">This is an In-box Message</span>
    • Generic
    • Showcase
    • View the code This is a flickering message / item
       
      <span class="message flickering">This is a flickering message / item</span>
    • View the code You have 3 remaining major bugs waiting to be fixed
       
      <span class="message flickering">You have 3 remaining major bugs waiting to be fixed</span>
    • Generic
    • Showcase
    • View the code

      UIKit Tooltip

      Hover here
       
      <div class="uikit-component">
          <a href="#" class="link" data-uk-tooltip title="Your Tooltip Message in Here">Hover here</a>
      </div>
    • View the code
      Close
       
      <div class="uikit-component">
          <a href="#" class="link" data-uk-tooltip title="Close">Close</a>
      </div>
  • View the code

    UIKit Positioning Tooltips

    Top Positioned Tooltip Top Left Positioned Tooltip Top Right Positioned Tooltip Bottom Positioned Tooltip Bottom Left Positioned Tooltip Bottom Right Positioned Tooltip Left Positioned Tooltip Right Positioned Tooltip
     
    <div class="uikit-component tooltips">
        <a href="#" class="link" data-uk-tooltip="{pos: 'top'}" title="Your Tooltip Message in Here">Top Positioned Tooltip</a>
        <a href="#" class="link" data-uk-tooltip="{pos: 'top-left'}" title="Your Tooltip Message in Here">Top Left Positioned Tooltip</a>
        <a href="#" class="link" data-uk-tooltip="{pos: 'top-right'}" title="Your Tooltip Message in Here">Top Right Positioned Tooltip</a>
        <a href="#" class="link" data-uk-tooltip="{pos: 'bottom'}" title="Your Tooltip Message in Here">Bottom Positioned Tooltip</a>
        <a href="#" class="link" data-uk-tooltip="{pos: 'bottom-left'}" title="Your Tooltip Message in Here">Bottom Left Positioned Tooltip</a>
        <a href="#" class="link" data-uk-tooltip="{pos: 'bottom-right'}" title="Your Tooltip Message in Here">Bottom Right Positioned Tooltip</a>
        <a href="#" class="link right" data-uk-tooltip="{pos: 'left'}" title="Your Tooltip Message in Here">Left Positioned Tooltip</a>
        <a href="#" class="link" data-uk-tooltip="{pos: 'right'}" title="Your Tooltip Message in Here">Right Positioned Tooltip</a>
    </div>
  • View the code

    UIKit Notification

    Simple Notification
     
    <div class="uikit-component">
        <a href="#" class="button notify" title="UIKit Notification" data-pos="top-center" data-message="This is a Simple Notification"><span class="title">Simple Notification</span></a>
    </div>
  • View the code

    UIKit Sticky Notification

    Sticky Notification
     
    <div class="uikit-component">
        <a href="#" class="button sticky-notify" title="UIKit Sticky Notification" data-pos="top-center" data-message="This is a Sticky Notification"><span class="title">Sticky Notification</span></a>
    </div>
  • View the code

    UIKit Delayed Notification

    Delayed Notification
     
    <div class="uikit-component">
        <a href="#" class="button delay-notify" title="UIKit Delayed Notification" data-pos="top-center" data-message="This is a Delayed Notification"><span class="title">Delayed Notification</span></a>
    </div>
  • View the code

    UIKit Positioning Notifications

    Top Center Notification Top Left Notification Top Right Notification Bottom Center Notification Bottom Left Notification Bottom Right Notification
     
    <div class="uikit-component">
        <a href="#" class="button notify" title="UIKit Top Center Notification" data-pos="top-center" data-message="This is a Top Center Notification"><span class="title">Top Center Notification</span></a>
        <a href="#" class="button notify" title="UIKit Top Left Notification" data-pos="top-left" data-message="This is a Top Left Notification"><span class="title">Top Left Notification</span></a>
        <a href="#" class="button notify" title="UIKit Top Right Notification" data-pos="top-right" data-message="This is a Top Right Notification"><span class="title">Top Right Notification</span></a>
        <a href="#" class="button notify" title="UIKit Bottom Center Notification" data-pos="bottom-center" data-message="This is a Bottom Center Notification"><span class="title">Bottom Center Notification</span></a>
        <a href="#" class="button notify" title="UIKit Bottom Left Notification" data-pos="bottom-left" data-message="This is a Bottom Left Notification"><span class="title">Bottom Left Notification</span></a>
        <a href="#" class="button notify" title="UIKit Bottom Right Notification" data-pos="bottom-right" data-message="This is a Bottom Right Notification"><span class="title">Bottom Right Notification</span></a>
    </div>
  • View the code

    UIKit Status Notifications

    Info Notification Success Notification Warning Notification Danger Notification
     
    <div class="uikit-component">
        <a href="#" class="button notify-info" title="UIKit Info Notification" data-pos="top-center" data-message="This is a Info Notification"><span class="title">Info Notification</span></a>
        <a href="#" class="button notify-success" title="UIKit Success Notification" data-pos="top-center" data-message="This is a Success Notification"><span class="title">Success Notification</span></a>
        <a href="#" class="button notify-warning" title="UIKit Warning Notification" data-pos="top-center" data-message="This is a Warning Notification"><span class="title">Warning Notification</span></a>
        <a href="#" class="button notify-danger" title="UIKit Danger Notification" data-pos="top-center" data-message="This is a Danger Notification"><span class="title">Danger Notification</span></a>
    </div>
Blackhole - Released under MIT license