State

Examples for the ss-c-state module.

Empty

◇
No studies yet

Create your first study to get started.

HTML 
<div class="ss-c-state ss-c-state--empty">
            <div class="ss-c-state__icon">&#9671;</div>
            <div class="ss-c-state__title">No studies yet</div>
            <p class="ss-c-state__message">Create your first study to get started.</p>
            <button class="ss-c-button ss-c-state__action">Create study</button>
        </div>

Error

HTML 
<div class="ss-c-state ss-c-state--error" role="alert">
            <div class="ss-c-state__title">Couldn't load studies</div>
            <p class="ss-c-state__message">The network request failed.</p>
        </div>

Loading

Loading studies…

HTML 
<div class="ss-c-state">
            <span class="ss-c-spinner"></span>
            <p class="ss-c-state__message">Loading studies&hellip;</p>
        </div>

Inline

◇ Nothing to show.
HTML 
<div class="ss-c-state ss-c-state--inline">
            <span class="ss-c-state__icon">&#9671;</span>
            <span class="ss-c-state__message">Nothing to show.</span>
        </div>