0

I have an app with a lot of card UI elements, they work great to organise data in categories. However, I am running into issues when I have a lot of data that I want to arrange in multiple columns. I added a scroll bar to a card, but it doesn't really make sense as the card is supposed to mimic a physical card, the content of which obviously cannot scroll.

So I came up with the idea of adding a sort of "cutout" to the Card component, where the columns would be displayed inside a "window", similar to this picture:

enter image description here

That way, i can have a scroll bar inside the "window", and retain the illusion of a physical card.

So, is there a name for such a UI element? Bonus points if there's a framework that already has such a card implemented.

4
  • Hi Toivo. Is what you're describing like the small scrollable windows in CodePen (codepen.io/pen)?
    – Izquierdo
    Commented Mar 25, 2020 at 15:35
  • @Stacy Yes, something along those lines (functionally), but they don't really capture the "card" aesthetic that I am looking for. Commented Mar 25, 2020 at 16:03
  • 1
    I've only heard of this called an "iFrame". Maybe there is a more modern term.
    – Izquierdo
    Commented Mar 25, 2020 at 17:49
  • @Izquierdo iFrame is still used these days (more than you would expect), so I would say it is still a relevant if not modern term :D
    – Michael Lai
    Commented Mar 26, 2021 at 0:14

1 Answer 1

1

The way you are approaching the design of the interface seems to be contradictory.

The purpose of using card components is to encapsulate or condense complex information into small and bite-sized chunks so it is easy to scan and read. The way you are trying to use card components to create a view for the user doesn't simplify the large amounts of information you are trying to fit into it, because now they need to scroll within the card to see things.

I suspect that there's nothing to stop you from putting a data table or table like component into a card, but I think that makes it no different to a scrollable modal window or simply a container with a table like component inside it.

Whether it will solve the problem you want to address or create additional issues remains to be seen, but I don't know if there is a name for this type of effect or style other than the fact that it doesn't seem to exist in most card component specifications.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.