Empty state

Empty states occur when there is no content to display. They provide users with feedback on the state of a content area and what they can do next.

Empty state with button

Your device is not onboarded

Go to your local device to upload an onboarding key
<div class="emptyState">
    <div class="emptyState__visual">
        <span aria-hidden="true" class="iconMdsp black asset"></span>
    </div>

    <h2 class="emptyState__title">
        Your device is not onboarded
    </h2>
    <div class="emptyState__description">
        Go to your local device to upload an onboarding key
    </div>
    <div class="emptyState__call2action">
        <a class="button button--primary" href="#"><span class="iconMdsp add" aria-hidden="true"></span>Upload key</a>
    </div>
</div>

Empty state with link

Your device is not onboarded

Go to your local device to upload an onboarding key
<div class="emptyState">
    <div class="emptyState__visual">
        <span aria-hidden="true" class="iconMdsp black asset"></span>
    </div>

    <h2 class="emptyState__title">
        Your device is not onboarded
    </h2>
    <div class="emptyState__description">
        Go to your local device to upload an onboarding key
    </div>
    <div class="emptyState__call2action">
        <a href="#">Upload key</a>
    </div>
</div>

Frameless Empty state

Your device is not onboarded

Go to your local device to upload an onboarding key
<div class="emptyState emptyState--frameless">
    <div class="emptyState__visual">
        <span aria-hidden="true" class="iconMdsp black asset"></span>
    </div>

    <h2 class="emptyState__title">
        Your device is not onboarded
    </h2>
    <div class="emptyState__description">
        Go to your local device to upload an onboarding key
    </div>
    <div class="emptyState__call2action">
        <a href="#">Upload key</a>
    </div>
</div>

Empty state with image

<div class="emptyState emptyState--withImage">
    <div class="emptyState__visual">
        <img src="assets/images/cloud.png" alt="image placeholder" />
    </div>

    <h2 class="emptyState__title">
        Your device is not onboarded
    </h2>
    <div class="emptyState__description">
        Go to your local device to upload an onboarding key
    </div>
    <div class="emptyState__call2action">
        <a href="#">Upload key</a>
    </div>
</div>

Frameless Empty state with image

<div class="emptyState emptyState--withImage emptyState--frameless">
    <div class="emptyState__visual">
        <img src="assets/images/cloud.png" alt="image placeholder" />
    </div>

    <h2 class="emptyState__title">
        Your device is not onboarded
    </h2>
    <div class="emptyState__description">
        Go to your local device to upload an onboarding key
    </div>
    <div class="emptyState__call2action">
        <a class="button button--primary" href="#"><span class="iconMdsp add" aria-hidden="true"></span>Upload key</a>
    </div>
</div>

Usage

ElementClassDescription
.emptyState .emptyState--removeDefaultBg Removes the default background pattern.
.emptyState .emptyState--withImage Adds a more complex default background pattern and more spacing for a bigger visual / image.
.emptyState .emptyState--frameless Sets the background color to white, removes the border around the Empty state area.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top