CSS Showcase · Live Demo

Lists that flow.

Feed and list layouts — two-column master/detail, media rows, grouped sticky sections, avatar rows, and swipe-to-reveal actions.

Featured demo

mobile · avatar-rows

Mina Cho

Quarterly report draft

Theo James

Design review notes

Priya Raman

Onboarding checklist

Sam Ortiz

Roadmap v3

mobile design patterns

list-avatar-rows.css
/* Avatar rows with chevron */
.list-avatar .row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border);
  padding-block: 0.5rem;
}

.list-avatar .avatar {
  border-radius: 9999px;
  background: var(--muted);
}

CSS features used

  • • CSS grid two-column layout
  • • position: sticky headings
  • • backdrop-filter blur
  • • transform: translateX reveal
  • • color-mix() active states
  • • Semantic tokens