I’m working on a web site for where people can sign up for training classes. It will have a list of classes for the users to choose from. Each class will be 1) Either one or two days, and 2) either be a webinar or an in-person class.
I’ve made a quick mock up of how I want each item to look. The user will be able to click a “details” button to expand a section that reveals more details about the class. Something like this:
an item on the list of classes
The part I’m struggling with is what to do with all the information on the top. There could be one or two dates, depending on the class, which makes it difficult to vertically align the rest of the items. Also, the “Webinar/In-Person” element is kind of difficult to place, but it is essential information.
One idea I had was to left-align the dates, and right-align everything else. That looks kind of ok, but it puts everything off balance, and it puts a big area of white space awkwardly in the middle of some densely grouped text.
I wouldn’t mind any other constructive criticism you have too. Don’t pay attention to the colors/contrast though. I’ll change that soon.