0

You have a horizontal row of three cards on a page. There's an image, a header, descriptive text and a button.

How do you ensure all of the cards stay the same height if the content in each card isn't consistent?

Some ideas:

  • Truncation of descriptive text with an ellipse.
  • Make rules around copy (i.e. descriptive text shouldn't be more than [x] number of characters).

Are these the two most viable options, or are there more that I'm missing? What do you all typically prefer to do in these situations (assuming disparate card height is not ideal)?

6
  • Well, I certainly use flex-grow to ensure that underheight cards can still stretch to match the long ones. But since that can result in cards with lots of empty space, I do also find ways to limit the maximum content of any card to avoid more than a little vacuum here and there. Commented Jan 15, 2023 at 21:40
  • Is this an implementation question or are you limiting the way you're thinking because of perceived technical issues? There are many ways to fix the size of a card and many ways to have the whole row aligned as any single card grows. Make your design and then present it to your developers and let them figure out if what you want is feasible and how they are going to do it. Commented Jan 17, 2023 at 15:58
  • @RouxMartin It's a question around how to visually maintain a fixed card height across multiple cards when content isn't consistent. Not necessarily a development/implementation question.
    – mrg0000
    Commented Jan 18, 2023 at 13:31
  • So it sounds like you're limiting your thinking because of a perceived technical limitation. Without any technical constraints, you could solve this problem in hundreds of ways. It's down to you to imagine all the ways you could solve the problem and then negotiate with your engineers to figure out which you use. There are too many 'right' answers here. Commented Jan 18, 2023 at 14:57
  • Can you elaborate? What do you mean by technical constraints in this case? I don't believe there are "hundreds" of right answers here, but please feel free to divulge a few @RouxMartin
    – mrg0000
    Commented Jan 18, 2023 at 16:14

1 Answer 1

1

I find that truncation works best because it does not constrain the user. In addition, I like to set a visible character limit on the form where the user enters content for the card.

The exact relationship between the card input form and card display has to be contextual. Most recently, I was building something where cards were used to showcase prior projects. The Client was comfortable with a 200-char hard limit on the card input. The card display was truncated to about 150. The idea was to nudge the user towards sufficient brevity.

4
  • Does the visible character limit on the form limit the size of the submission? Or does it only inform the user how many characters will be displayed in the card, but still allow more characters to be entered? Commented Jan 16, 2023 at 10:55
  • @bloodyKnuckles I believe the exact rule has to be contextual. Most recently, I was building something where cards were used to showcase prior projects, and the Client was comfortable with a hard character limit of 200, and display truncation of about 150. The idea was to nudge the user towards sufficient brevity.
    – essbee
    Commented Jan 16, 2023 at 12:55
  • Thanks for clarifying, it's not clear to me in your answer exactly what you like—here: "I like to set a visible character limit on the form where the user enters content for the card." I think updating your answer with your comment will improve it, and not make people like me read the comments to get clarification. Commented Jan 16, 2023 at 14:07
  • Thank you for the pointed feedback, I integrated our comment thread into my answer.
    – essbee
    Commented Jan 17, 2023 at 5:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.