In my website I have a list of activities. Previously this was just a list of links, clicking the links would result in a dropdown, like so:

Old activities list

On hovering over the links that toggle the explanation under it, a line also appears under it.

Now, I'm redesigning my website using Material Design, but I can't really figure out how to deal with this. For the time being I've used the same structure as I had before, you can have a look here:

New Activities

Here you can click the box. Upon clicking it, the white div with the explanation appears and the card gets elevated slightly.

Now, currently this is just spanning the whole width of the screen. On mobile this does look quite decent, but as you notice on my desktop computer it looks a bit ridiculous. I've tried experimenting with also allowing the events to be horizontal, but I feel like it takes away the clarity of when the events happen. Just to be clear: this isn't an event list like on Facebook, it's a chronological list of activities that have passed and are in the future.

So in short: how should I clearly line up and show these events, preferably in a way that complies with Material Design.


For the best UX you should probably use something like: "next event"

Then another row with "future events"

And the last row with "archive" where you can put all past events.

This makes things clear to the user and makes it easy to navigate through.

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.