Shopify polaris edit Card height

Shopify Partner
3 0 0



I see that Polaris' Card component adjusts its height based on the contents in it. Is there a way I can make the card have a fixed height? If so, can you show me how? Anything would be great! Thanks!



Shopify Partner
1838 174 624

Hello there!


The Shopify Polaris team took a design decision where component customisation is generally not possible, allowed or even endorsed because it isn't meant to be a general purpose UI component library and they'd like to avoid cases where app developers go off on a tangent. They have many good reasons why they chose to do so as can be read here if you're interested.


For you specific use case, you could simply have a nested element in the <Card /> like shown here in my quick Pen (check App.js. Used styled-components, works with any of the React styling methods).


However, just because it is possible, I wouldn't recommend it and would proceed carefully as the last thing you want to do is introduce inconsistency within the app UI.


Best wishes!

I turn coffee in to code - since 1998
1 Like