Promo Headline

Promo molecules are like other messages, except that these are shown by default on page load (instead of triggered by some user action) and may be dismissed by the user.

Messages

Messages convey important information related to the state of your app or the device and often request feedback.

Messages are fixed to the top of the window by default and can be triggered by any means necessary, and most messages will dismiss themselves – unless they require the user to confirm an action – after 10 seconds, or the user can dismiss them using the close icon.

If you’d rather have your messages on the bottom of the screen, simply add a .bottom class to the parent <div class="messages">.

Message Examples

Error Messages

An error message provides contextual information displayed when an unexpected condition occurs.

html
<div class="error">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="warning"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm0-8h2v6h-2V7z"></path></svg>
  <p>This is an error alert message</p>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="close"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-9.414l2.828-2.829 1.415 1.415L13.414 12l2.829 2.828-1.415 1.415L12 13.414l-2.828 2.829-1.415-1.415L10.586 12 7.757 9.172l1.415-1.415L12 10.586z" /></svg>
</div>
script
$('.show-error').click( function() {
  $('.messages .error').addClass('show');
  setTimeout(function() { 
    $('.messages .error').removeClass('show') }, 10000);
});
$('svg.close').click( function() {
  $('.messages .error').removeClass('show');
});

Success Messages

A success message provides assurances to the user that an intended action is successful.

html
<div class="success">
  <p>This is a success alert message</p>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="close"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm0-9.414l2.828-2.829 1.415 1.415L13.414 12l2.829 2.828-1.415 1.415L12 13.414l-2.828 2.829-1.415-1.415L10.586 12 7.757 9.172l1.415-1.415L12 10.586z" /></svg>
</div>
script
$('.show-success').click( function() {
  $('.messages .success').addClass('show');
  setTimeout(function() { 
    $('.messages .success').removeClass('show') }, 10000);
});
$('svg.close').click( function() {
  $('.messages .success').removeClass('show');
});

Confirmation Messages

A confirmation message provides the user an opportunity to confirm a requested action.

html
<div class="confirm">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="warning"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm0-8h2v6h-2V7z"></path></svg>
  <p>This is a confirmation alert message. Are you sure you want to continue?</p>
  <div class="buttons">
    <button type="button" class="no">No</button>
    <button type="button" class="yes">Yes</button>
  </div>
</div>
script
$('.show-confirm').click( function() {
  $('.messages .confirm').addClass('show');
});
$('button.no').click( function() {
  $('.messages .confirm').removeClass('show');
});
$('button.yes').click( function() {
  $('.messages .confirm').removeClass('show');
});

Modal Messages

A modal is a dialog box or popup window that is displayed on top of the current page.

html
<div class="modal">
  <div class="content">
    <h2>Modal Headline</h2>
    <p>Any kind of modal content can go here.</p>
    <button>Learn More</button>
  </div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="close"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
</div>
script
$('.show-modal').click( function() {
  $('.messages .modal').addClass('show');
});
$('svg.close').click( function() {
  $('.messages .modal').removeClass('show');
});

Promo Messages

A modal is a dialog box or popup window that is displayed on top of the current page.

html
<div class="promo show bg-secondary">
  <h1>Promo Headline</h1>
  <p>Promo molecules are like other messages, except that these are shown by default on page load (instead of triggered by some user action) and may be dismissed by the user.</p>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="close"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
</div>
script
$('.promo svg.close').click( function() {
  $('.promo').removeClass('show');
});

Push Down Messages

Push Down messages literally push the rest of the page down the screen once the window is done loading.

html
<div class="message">
  <h1>Push Down Headline</h1>
  <p>Push Down molecules literally push the rest of the page down off the screen once the window is done loading.</p>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="close"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
</div>
script
window.onload = function() {
  setTimeout(function () {
    $('aside.message').addClass('show');
  },2000);
};
$('aside.message svg.close').click( function() {
  $('aside.message').removeClass('show');
});

Messages

This is an error alert message

This is a success alert message

This is a confirmation alert message. Are you sure you want to continue?

Modal Headline

Any kind of modal content can go here.