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

Upload 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

Upload 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

Open demo

<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

Open demo

<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

Element	Class	Description
`.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.

Empty state (Patterns)