CSS Showcase · Live Demo

File uploaders, per device.

A drag-and-drop hero on desktop, a split picker on iPad, and a thumb-friendly attach sheet on mobile — reshaped with @container queries and auto-fill grids.

Featured demo

mobile · attach
brand-hero.png2.4 MB
spec-sheet.pdf812 KB
product-shot-03.jpg1.9 MB64%
notes.txt12 KB28%

mobile design patterns

uploader-attach.css
/* Mobile attach button + list */
.uploader[data-pattern="attach"] {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 0.5rem;
}

.attach-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.75rem; /* thumb-friendly */
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
}

CSS features used

  • • Container queries
  • • auto-fill minmax grids
  • • aspect-ratio tiles
  • • color-mix() drag state
  • • Logical properties
  • • Semantic tokens