Alerts & Modals

Filter criteria with no results

Sorry, we ran out of results. Hey, it happens! Try filtering again.
<div class="secondary-info">Sorry, we ran out of results.  Hey, it happens!  Try filtering again.</div>

Spinners

Animated Spinner

  1. When clicking into a new section:
    • no overlay/filter
  2. When VIEW MORE button is clicked:
    • spinner should replace button
  3. When endless scrolling has assets to load:
    • spinner should center align at bottom of the page 
<div class="tk-loader">
    <div class="tk-loader-animation"></div>
    <span class="icon icon-general-k-logo"></span>
</div>

Placeholder with Spinner

When card is loading, card shape and blue background should load first (no spinner). Then after three seconds, load centered spinner

NOTE .yourContainer is container for the docs demo, replace it with your container and the loader will expand to the container dimensions

<div class="yourContainer">
    <div class="tk-loader-placeholder">
      <div class="tk-loader">
        <div class="tk-loader-animation"></div>
        <span class="icon icon-general-k-logo"></span>
      </div>
    </div>
</div>

Page Overlay with Loader

When firing filters or sort (checklist), use overlay and a centered spinner.

Click button below to see the overlay with loader.

Show overlay with loader
<div class="btn btn-primary show-overlay-btn">Show overlay with loader</div>

Overlay Loader Markup

//  <div class="tk-loader-overlay">
//    <div class="tk-loader">
//      <div class="tk-loader-animation"></div>
//      <span class="icon icon-general-k-logo"></span>
//    </div>
//  </div>

Empty Placeholder

NOTE .yourContainer is container for the docs demo, replace it with your container and the loader will expand to the container dimensions

  <div class="yourContainer">
    <div class="tk-loader-placeholder"></div>
  </div>

Alerts

Unread messages indicator

Dot to notify users that an unread message exists. Circle will be 9x9 pixels on desktop and 8x8 on touch devices.

<div class="alert-circle"></div>

New messages count bubble

Bubble to wrap number of unread messages in inbox.

1

11

77

88

99+
  <div class="alert-bubble">
    <div class="left"></div>
    <div class="center">1</div>
    <div class="right"></div>
  </div>
  <br />
  <div class="alert-bubble">
    <div class="left"></div>
    <div class="center">11</div>
    <div class="right"></div>
  </div>
  <br />
  <div class="alert-bubble">
    <div class="left"></div>
    <div class="center">77</div>
    <div class="right"></div>
  </div>
  <br />
  <div class="alert-bubble">
    <div class="left"></div>
    <div class="center">88</div>
    <div class="right"></div>
  </div>
  <br />
  <div class="alert-bubble">
    <div class="left"></div>
    <div class="center">99+</div>
    <div class="right"></div>
  </div>

Feedback Messaging

<button id="feedback-message" class="btn btn-primary">Feedback Message</button>

JS attached to Feedback Message button

$('#feedback-message').on('click', function(e){
    XO.feedbackMessage.render({
        id: "error-msg",
        message: "This is a custom message.",
        button         : {                      // Button object to show a button at the end of the text
          text: 'action',                       // Text to display in the button, default `action` - required for button to display
          customClass: 'fm-action',             // Custom class to attach to the button
          url: '#fm-action-link'                // URL to attach to the action button
        }
    });
});

Render Options and Default Values

id: "feedback-message",                  // Id gets attached to the error message container as id="feedback-message"
backgroundColor: "knottie-red",          // Background color of the message container, supports 'knottie-red', 'green' and 'super-light-gray'
message: "Custom Message",               // Custom message to be displayed inside the container.
feedbackMessageContainer: document.body, // Container to place feedback message
button: {                                // Button object (undefined by default to show no button) to show a button at the end of the text
  text: 'action',                        // Text to display in the button, default `action` - required for button to display
  customClass: 'fm-action',              // Custom class to attach to the button
  url: '#fm-action-link'                 // URL to attach to the action button
}