VoxelKit
← Back to library
Search & filters Free

No-results empty state

Style Voxel's "no results found" message into a centred, friendly empty state instead of bare text.

0
No matches
Reset filters
.ts-no-posts,
.no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 24px;
  text-align: center;
  color: rgba(0,0,0,.55);
}
.ts-no-posts::before,
.no-results::before {
  content: "";
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0,0,0,.06);
}

This centres and pads the empty-results message so a filtered search that returns nothing looks intentional rather than broken, with a soft placeholder circle above the text.

Notes

  • .ts-no-posts targets Voxel’s default empty feed message; .no-results is a placeholder for custom markup — keep whichever matches your setup.
  • Swap the ::before circle for a background-image icon if you want a real illustration.
  • Confirm the actual empty-state class in your feed with browser inspect, as it can vary by template.