A placeholder shown when a collection has no items or content.
No components yet
Get started by creating your first component. It only takes a few minutes to build something great.
<div class="es"> <div class="es-icon"><span class="material-icons-round">folder_open</span></div> <div class="es-title">No items yet</div> <div class="es-desc">Create your first item to get started.</div> <button class="es-btn">Get started</button> </div>
Installation
Built with pure HTML and CSS. Include ds-shared.css in your project.
pnpm add @norbielink/ds
Examples
In a dashed container
You're all caught up!
No new notifications. Check back later or adjust your notification settings.
<div class="es" style="border:1.5px dashed #e0e0e0;border-radius:12px;"> <!-- content --> </div>
API Reference
Classes
| Class | Description |
|---|---|
es | Container — centered flex column |
es-icon | Rounded icon box |
es-title | Bold headline |
es-desc | Supporting text |
es-btn | Primary CTA button |
es-dk | Dark mode modifier |