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
<div class="emptyState">
<div class="emptyState__visual">
<span aria-hidden="true" class="iconMdsp filled 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
<div class="emptyState">
<div class="emptyState__visual">
<span aria-hidden="true" class="iconMdsp filled 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
<div class="emptyState emptyState--frameless">
<div class="emptyState__visual">
<span aria-hidden="true" class="iconMdsp filled 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
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 and removes the border around the Empty state area. |