Creating a CSS Glossary

[geekalert]

Hi all! I am building a corporate glossary and I want to achieve a specific design resembling a line of horizontally aligned cards with words and expandable links on them. The cards themselves need only be outlines; I’d like a giant letter in the lower right corner of each card and the total number of terms for that card on its lower left. (Alternatively to an accordion expanded when clicking a word, the card could spin and reveal the definition of the word chosen.) I’ve attached a picture with the general idea of what I’m hoping to accomplish—though I do not want the lines under each word, nor do I want the date it was added, When the user clicks on the “ . . . “ beneath the words or clicks on the number of terms in the lower left or the letter on the right, a list of all the terms should expand out from the card. This is my first glossary, but I have a pretty specific idea in mind. If you want to offer other ideas or advice, though, I’m 100% open to it. I’m definitely interested in a very material design/organic look to it, though, really, just rounded rectangles would be okay.

Suggestions/thoughts/recommendations/improvements also very welcome.

Starter look for my idea (though I imagined more rounded rectangles and the other exceptions/thoughts mentioned above):



Thank you, guys! I have until Friday to throw this together for my company, so your help is incredibly appreciated—as are CodePen examples, etc. you guys are amazing!!

 

[fisicx]

How far have you got?

For the general layout I'd use display:grid - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

If you want visual effects then jQuery or css transitions are simplest way to do this - but the UX is better if you don't.

How are you managing the glossary? Will it be database driven? Counting the number of terms is simple enough with a bit of PHP.

Forcing the user to take an action to see the list for each letter isn't good. Far better to bin the cards and just do a list with toggles on each letter. Or even better, just display the list. The more complicated the glossary the less usable it becomes.

I can think of a number of ways to do what you want but they will all need a lot of work but I doubt it will get done by Friday without a lot more information about the project.