2

I have a list of cards where each card has a text content, an optional title, and one or more optional icon indicators.

The exact use-case is not important but as an example, the user has a list of tasks to do, and each task has an optional date, and the task can be marked as 'important' with an exclamation icon. This is shown in the graphic below.

enter image description here

The problem: when the card has a date, or does not have both the date and icons, it looks fine. But when it has icons but not a date (i.e. the third card in the graphic), the card looks weird because the icons take up the entire row space but only uses a small amount of it.

How can this be solved or am I thinking too much into it?

3

Adding some visual hierarchy might help. Example :

enter image description here

2

I was thinking about the case and the solution seems not that hard. Why not adding the icon at the beginning of text content?

enter image description here

2

Have you considered left aligning and vertically centering the icon? Then it’s in a consistent location and the content is on the right column, whether you have the date or not, it doesn’t affect the layout.

example

1

You could consider:

1/ padding the right side of the card content. If the text is ranged left you may not have to pad it much, as most lines will wrap before they get near the icon

2/ position the icon on the card edge, away from the text

3/ float the icon top right in the text area, so that text flows around it

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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