I'm a front end developer and I need a page to display information about all schools in my city (52).
I tried using Bootstrap Cards and an input where the user will type and the cards bellow will be filtered, only showing the schools that matches the user giving info.
But I think it look really bad and boring. Does someone has tips on how to do this in a nice way?
A scrolling list of nicely designed, consistent cards might look a little better than what's there - even though the cards themselves are the same size, the variable height of the information WITHIN each card makes it look misaligned, since the buttons show up as staggered. Also the actual information is all very similar in look
You might also consider what information is most critical to show (and what you have available), and perhaps find a more nicely designed way to display each school. A photo or map on the side, the name called out more prominently, maybe a little more information about the school that is of interest to the audience.
Here's a super quick idea...
I agree with JonW that you can automatically filter down based on the user's region.
However, to start, you may consider integrating with a mapping service and showing a map with pins and popups with this info for all the schools. Users will be comfortable with panning and zooming to regions they are interested in even before they realize they can filter the schools in other ways. Also, it acts as a colorful initial visual to greet visitors.
