CSS Showcase · Live Demo

Nothing here — on purpose.

Empty states that guide instead of dead-end: centered heroes, illustrated cards, no-results feedback, offline notices, and compact inline rows.

Featured demo

mobile · centered-hero

No messages yet

When someone writes to you, the conversation shows up right here.

mobile design patterns

empty-centered-hero.css
/* Perfectly centered empty state, no wrapper math */
.empty-hero {
  display: grid;
  place-items: center;
  min-height: 100%;
  text-align: center;
  gap: 0.5rem;
  padding: 1rem;
}

.empty-hero .art {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  width: 3.5rem;
  border-radius: 9999px;
  background: color-mix(in oklch, var(--primary) 12%, transparent);
}

CSS features used

  • • display: grid + place-items
  • • aspect-ratio art panels
  • • color-mix() tonal surfaces
  • • radial + linear gradients
  • • flex-wrap suggestion chips
  • • Dashed inline placeholders