How to equalize sizes across different components - or a better approach
Hi everyone,
I have a slider containing several cards (see attached). The issue I have is that depending on the content of the header (for exaple if venue name spans 3 lines instead of two) the date component next to it expands causing the cards to look inconsistent. But on the other hand if I set the date component to stick to the top right with no expansion it also doesn't look nice.
Is there a possible way so that if the date component expands in one card it expands in all the cards, or is that impossible? What would be the ideal approach to achieve consistency here?

8 Replies
hmmm don't think i've used it before, i'll read up on it thank you!
oh wow this is so good, thank you @Jochem
glad to help!
an alternative solution: use shorter names
then you can show the NOV the same size as the day
or slightly smaller
and it will look way better, and less visually cluttered
I mean, "do a redesign" isn't necessarily the answer... but simultaneously, I do think the cards are maybe a bit narrow for their height
it looks like those elements are sharing the width 50/50 so that wouldn't really fix anything
it would fix the "november" being so huge
and would make it a lot easier to make both squares the same size
and to do that, all you would need to do is absolutely nothing
the issue here is the left half of the top row pushing the content down though
OH, i see, i see
🤦♂️