Home / Business Ready Pages / Directory Listing

Directory Listing CSS Template, Free with Live Demo

Free directory listing template for a college finder. Live search, filters by city, subject and fees, sort, result count and listing cards. Live demo. The example is Course Compass, a college finder.

Open live demo Download HTML file View code on GitHub

Directory Listing CSS template example: Course Compass, a college finder

What is directory listing?

A directory helps people narrow a long list down to a few good options. Search at the top, filters on the side, a live count of results and cards with the facts that matter most.

Everything filters instantly as you type, tick or slide. The fee slider, applications open checkbox and sort menu all work together, and there is a helpful message when nothing matches.

Good for

School and college directories
Business and service listings
Job boards
Real estate and rental listings

What you get in this template

Live search by name or subject
City and subject checkboxes built from the data
Maximum fee slider
Sort by name or fees
Empty state with advice when nothing matches

The key CSS

This is the part that makes the directory listing look work. Copy it into your own project.

.layout { display: grid; grid-template-columns: 240px 1fr; gap: 28px; }
aside { position: sticky; top: 16px; align-self: start; }
.card { display: grid; grid-template-columns: 88px 1fr auto; gap: 18px; border-radius: 14px; }
.search div:focus-within { box-shadow: 0 0 0 3px #e0621f, 0 12px 30px rgba(23,32,43,.12); }

How to use it

Click Download HTML file above.
Open the file in any code editor, like VS Code.
Change the text, colors and links to match your project. Colors are at the top of the style tag.
Upload it to any host, such as GitHub Pages, Netlify or your own server. It is one file with no build step.