Height and width for the Card component

[jaymehta-twilio]

Hello,

I just came across a recent design that I'm trying to implement as shown in attachment. I was wondering if there was a reason not to provide height and width for the card component. It's hard to provide precise widths and heights to grid.

[nkrantz]

Hey @jaymehta1986, thanks for starting a Discussion on this. In general, our stance is that components should not be concerned with layout. There are a few reasons that setting fixed sizes (especially height) on components is a bad idea:

• Internationalization
• Responsiveness
• User preference/zooming/default font size override

Any of the above could cause content overflow of components. Because of this, we recommend placing components inside of layouts (using 100% width on the components) and letting the contents dictate the size of the components.

To get a better sense of how we can help you with your layout, it would be great to get some more context. What are you trying to achieve? Once we understand what your expected outcome is, we can provide more specific guidance.

[jaymehta-twilio]

Hi Nora,

Thank you for the response. We have a few design screens (as shown in the attached screenshots) where we have a fixed size boxes to use. Our first preference was the Card component because that's how our design is expecting.

I've implemented this with Box where I can provide a fixed height and width but the border color has to be from available design tokens for the available border color. So, it's not the same color as the Card border uses.

We can't use a responsive box which changes its size to show these kind of card designs. As for the overflow is concern, developers can always wrap the text to avoid the overflow.
I've put the Box within a Grid > Column but it spans based on the width which changes our card on every view width. So, I don't know how to achieve a fixed width with this.

[mindytom]

To provide more context, here's the clickable prototype

[TheSisb]

Hi @mindytom & @jaymehta1986,

I made a sample of how we believe Cards can be used for maximum flexibility: https://codesandbox.io/s/how-to-layout-cards-fnu66?file=/src/index.tsx. Please let me know if this helps!

[jaymehta-twilio]

Thanks @TheSisb 🙏

This is helpful. We may have to use <Box width={fixedWidthNumber}>. As I understood from the design principles that while it may not be recommended but is a way to get what's needed in our design.

[SiTaggart]

If you're looking for equal height cards too, this has come up in a previous discussion. In there we link to a codesandbox to demonstrate how to do it.

The corresponding documentation page on the Paste site is under Grid https://paste.twilio.design/layout/grid/#equal-column-heights