Skip to content

CSS Showcase · Live Demo

One choice. Many patterns per device.

Pick a device, then pick a design pattern for that device — desktop offers a segmented control, cards grid, and classic list; mobile offers stacked list rows and stacked large cards.

Featured demo

mobile · list

mobile design patterns

radios-list.css
/* Classic list with descriptions */
.plan-list {
  display: grid;
  gap: .5rem;
}

.plan-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .5rem;
  border-radius: .5rem;
  border: 1px solid var(--border);
  padding: .5rem .75rem;
}

CSS features used

  • • Container queries
  • • CSS Grid responsive columns
  • • Custom radio styling
  • • Segmented controls
  • • Selectable cards
  • • Semantic tokens

CSS Showcase · Share

Share this demo as a 1:1 image

A 2048×2048 PNG with the live current view, the title, and the CSS features — for social posts, docs, and READMEs.

The snapshot follows the device selected on the page — switch between desktop, iPad, and mobile above and the card updates.