Will a user be able to identify the relative "meanings" of separate cards on a timeline if the icons are located opposite from the card’s title?
I'm designing a vertical responsive timeline for a health-tech company, and the timeline is supposed to show different "events" throughout a patient's physical rehab program, each being represented by interactive cards. To emphasize the difference between cards/content, we're using icons (see image). The issue arises with the icon placement. I tried placing them in front of the bold text, as they're related to that content, but it just looks kind of awkward visually, plus it doesn't work well responsively with mobile. As a possible fix, i put the icons on the top right of the cards (see image), which works well responsively, but I didn't know if that would create a problem with how patients relate the information in the text with the meaning of the icons - especially when the cards are in their larger desktop version, with more white space separating the title and icon. Does that make sense? Appreciate any thoughts/feedback!