Message

Messages are used to display important content on the page, inside a card or modal.

You can omit the close button from the examples below if you want to create a fixed message that can't be removed.

Call the message initialiser on any pages that have a close message button.

initMessage()

Info Message

Scheduled Maintenance

We'll be releasing some updates tonight at 01:00 GMT. You may experience some temporary issues with the dashboard.


<div class="message info">

  <i class="ico-btn ico ico-light ico-info"></i>
  <button class="ico ico-dark ico-cross btn-close-message"></button>

  <section class="content">

    <h1>Scheduled Maintenance</h1>
    <p>We'll be releasing some updates tonight at 01:00 GMT. You may experience some temporary issues with the dashboard.</p>

  </section>

</div>

Success Message

Account Verified

Congratulations, your account has been verified. You may now create your own universe.


<div class="message success">

  <i class="ico-btn ico ico-light ico-check"></i>
  <button class="ico ico-dark ico-cross btn-close-message"></button>

  <section class="content">

    <h1>Account Verified</h1>
    <p>Congratulations, your account has been verified. You may now create your own universe.</p>

  </section>

</div>

Warning Message

Warning

Please update your security settings immediately or your account will be suspended.


<div class="message warning">

  <i class="ico-btn ico ico-light ico-warning"></i>
  <button class="ico ico-dark ico-cross btn-close-message"></button>

  <section class="content">

    <h1>Warning</h1>
    <p>Please update your security settings imediately or your account will be suspended.</p>

  </section>

</div>

Error Message

Account Disabled

Your account has been temporarily disabled due to suspicious activity.

Get Help

<div class="message error">

  <i class="ico-btn ico ico-light ico-warning"></i>
  <button class="ico ico-dark ico-cross btn-close-message"></button>

  <section class="content">

    <h1>Account Disabled</h1>

    <p>Your account has been temporarily disabled due to suspicious activity.</p>

    <a href="#" class="btn">Get Help</a>

 </section>

</div>

Blank Slate Message

Blank slate messages are used to communicate with first-time users when no data exists, or when all UI elements have been removed.

You can toggle the blank slate message with Javascript.

// state: true (show) or false (hide)
toggleBlankSlate(state)

Get Started

Create your first thing by clicking on the Create Thing button on the left menu.

<div class="blankslate-message">

 <h2>Get Started</h2>
 <p>Create your first thing by clicking on the <a href="#" class="desktop btn btn-inline">Create Thing</a> button on the left menu.</p>

</div>