Empty
An empty state for when there is no data yet: icon, title, description, starting actions and a learn-more link.
Usage
<header> holds the icon figure, title and
description. <footer> holds a row of buttons
followed by a link.
No products yet
You have not added any products. Create your first product or import them from a CSV file.
<section class="empty">
<header>
<figure><i class="icon icon-package" aria-hidden="true"></i></figure>
<h3>No products yet</h3>
<p>You have not added any products. Create your first product or import them from a CSV file.</p>
</header>
<footer>
<div>
<button type="button" class="btn" data-variant="primary">Add product</button>
<button type="button" class="btn">Import</button>
</div>
<a href="#" class="link" data-variant="muted">Learn more<i class="icon icon-arrow-up-right" aria-hidden="true"></i></a>
</footer>
</section>Attributes
| Attribute / element | Values | Description |
|---|---|---|
.empty |
Centred box with 32px padding top and bottom. Use on
<section> or <div>.
|
|
> header |
Groups the icon, title and description. | |
figure |
40px icon frame with a subtle fill. Put an
.icon inside.
|
|
h3 |
Title, 16px bold. | |
p |
Muted description, max 28rem wide. | |
> footer |
Optional. Stacks the buttons and link vertically. | |
> footer > div |
Button row that can wrap. The main button uses
data-variant="primary"
|
|
> footer > a.link |
data-variant="muted" |
Muted learn-more link below the button row. |