Where to place icon on a card with only text and an icon?

Question

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.

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?

Answer 1

Adding some visual hierarchy might help. Example :

Answer 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?

Answer 3

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.

Answer 4

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