Thinking in design system, how would you approach the design below? Specifically, how would you solve the collapsing padding/gap between the first two columns, and the background that stretches out of the container.

It’s been puzzling me for days and I’m starting to run out of ideas. I’m not asking for final code, just how to conceptualize the components/classes that would work out. Like, are the first and second rows the same component? How many layers of components would you need? Which component/layer applies the gap/padding?

Thanks in advance!

Post image

Large breakpoint

Small breakpoint

Source link

Write A Comment