I want to make product cards with size and prices

I can't figure out how to make it look good. Any ideas?

Image #2 was the best I could come up with but it doesn't look all that polished. I don't want the price and size to be hidden under a collapsible bar on anything.

Mooshio•1/28/25, 12:25 PM

Going off of image #2, I think it could use more padding on the sides and the top.

I think you could maybe use a little more space between the image and product name.

Try adding a drop shadow on the card for depth.

The text in the table is short, so it looks awkward stretched out over the full width of the card. I would try reducing the width of the table. Once the product size and pricing are closer together, it should be easy enough to read without the need for a border in between each row. You could keep the row borders, but change it to a lighter gray. And I would center the text vertically in each row.

curiousmissfox•1/29/25, 8:21 PM

If you don’t want to make a drop-down select menu with the sizes and prices , you could do buttons like Amazon has for different options.

I agree about the padding too and you can make the font size of the title larger and figure out a scalable solution.

Like what if there are more sizes/options for the product than fit in the card? Or just one size/option like the last card ? Have to account for the two extremes , like say the data was coming in dynamically and you don’t know how many sizes/options there will be; you have to design to account for one option or a dozen

Where’s the call to action ? What else goes in this card , like an add to cart button , or how do you select the size and price once the user decides ? Is a default selected and how is that represented ? Will there be any description or details about the item ?

Until you have all the elements that are going to be used in bthe space it’s hard to design and figure out hierarchy. I don’t make many decisions until I know I have all of the elements (or placeholders for ) because otherwise how can j know how divide up the space.

Do they need to be this tall ? What is deciding the height ? And btw would be a good use for subgrid based on the second image example as the first line of the table is lower on the second card because the title wraps. Subgrid will help line everything up

Ἔ

ἔρως•2/1/25, 3:20 PM

what's the purpose of the cards? just to show prices or to let people pick an option?