Responsive Block Patterns — Cross-Breakpoint Design Intelligence

Mental model

Responsive design is not resizing. It is deciding, per component, which of four things happens as space runs out: it reflows, it stacks, it transforms into a different component, or it disappears.

• Container queries beat media queries for anything reusable. A card should respond to its container, not the viewport, or it breaks the moment you put it in a sidebar.
• Fluid before stepped. clamp() handles the continuum; breakpoints handle the genuine transformations. Six breakpoints usually means someone was using them to do clamp()'s job.
• Design the transformation, not the two end states. A table becoming a card list is a decision about what to drop; specifying only "table" and "cards" leaves that decision to whoever implements it.
• Touch targets do not scale down. 44px is 44px at every breakpoint.