*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Inter, system-ui, sans-serif;
background: #050910;
color: #f2f6ff;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
}
.demo {
width: 100%;
max-width: 960px;
}
.demo-title {
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 0.375rem;
text-align: center;
}
.demo-sub {
color: #475569;
font-size: 0.875rem;
margin-bottom: 2.5rem;
text-align: center;
}
/* ── Grid ── */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.25rem;
}
/* ── Empty state card ── */
.empty-state {
background: #0d1320;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 1.25rem;
padding: 2.5rem 2rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0;
transition: border-color 0.2s;
}
.empty-state:hover {
border-color: rgba(255, 255, 255, 0.16);
}
/* ── Icon wrapper ── */
.empty-icon-wrap {
width: 76px;
height: 76px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
flex-shrink: 0;
}
.empty-icon-wrap--blue {
background: rgba(56, 189, 248, 0.12);
color: #38bdf8;
}
.empty-icon-wrap--purple {
background: rgba(167, 139, 250, 0.12);
color: #a78bfa;
}
.empty-icon-wrap--green {
background: rgba(52, 211, 153, 0.12);
color: #34d399;
}
/* ── Text ── */
.empty-heading {
font-size: 1.0625rem;
font-weight: 700;
color: #f2f6ff;
margin-bottom: 0.5rem;
}
.empty-body {
font-size: 0.8125rem;
color: #64748b;
line-height: 1.65;
margin-bottom: 1.5rem;
max-width: 26ch;
}
.empty-body strong {
color: #94a3b8;
}
/* ── Buttons ── */
.btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.5625rem 1.125rem;
border-radius: 0.5625rem;
font-size: 0.8125rem;
font-weight: 600;
border: 1px solid transparent;
cursor: pointer;
transition: background 0.15s, color 0.15s;
font-family: inherit;
}
.btn--primary {
background: #38bdf8;
color: #0f172a;
}
.btn--primary:hover {
background: #7dd3fc;
}
.btn--ghost {
background: rgba(255, 255, 255, 0.06);
color: #94a3b8;
border-color: rgba(255, 255, 255, 0.1);
}
.btn--ghost:hover {
background: rgba(255, 255, 255, 0.1);
color: #f2f6ff;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Empty State</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="demo">
<h1 class="demo-title">Empty State</h1>
<p class="demo-sub">Placeholders for no data, no results, and no notifications.</p>
<div class="grid">
<!-- No data -->
<div class="empty-state">
<div class="empty-icon-wrap empty-icon-wrap--blue">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
</div>
<h2 class="empty-heading">No data yet</h2>
<p class="empty-body">Your workspace is empty. Add your first item to get started.</p>
<button class="btn btn--primary" type="button">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
Add Item
</button>
</div>
<!-- No search results -->
<div class="empty-state">
<div class="empty-icon-wrap empty-icon-wrap--purple">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
</div>
<h2 class="empty-heading">No results found</h2>
<p class="empty-body">We couldn't find anything matching <strong>"dashboard template"</strong>. Try a different search term.</p>
<button class="btn btn--ghost" type="button">Clear search</button>
</div>
<!-- No notifications -->
<div class="empty-state">
<div class="empty-icon-wrap empty-icon-wrap--green">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/><polyline points="20 6 22 6 22 8"/><polyline points="7.343 1.593 6.646 2.29 8.06 3.706"/></svg>
</div>
<h2 class="empty-heading">You're all caught up</h2>
<p class="empty-body">No new notifications right now. Check back later or adjust your notification settings.</p>
<button class="btn btn--ghost" type="button">Notification settings</button>
</div>
</div>
</div>
</body>
</html>