Shopify polaris edit Card height

Solved
Shopify Partner
3 0 0

 Hello,

 

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!

0 Likes
Highlighted

Success.

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