CSS Showcase · Live Demo

One modal. Many flows and patterns.

Pick a device, then pick a design pattern — dialog, drawer, and full-screen on desktop, bottom sheet or full-screen on mobile — each driven by container-type and data-flow.

Featured demo

mobile · sheet · confirm
Publish changes?
Your updates will be visible to all teammates immediately.

mobile design patterns

Flow

modal-sheet.css
/* Bottom sheet */
.modal-scrim {
  position: absolute; inset: 0;
  display: grid;
  place-items: end center;
  background: rgb(0 0 0 / .45);
}

.modal {
  width: 100%;
  border-radius: 1rem 1rem 0 0;
  animation: sheet-in .25s ease both;
}

@keyframes sheet-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

CSS features used

  • • Container queries
  • • data-* flow variants
  • • Dialog / drawer / sheet
  • • Keyframe entrance
  • • Semantic tokens
  • • Grid place-items