Creating a CSS Glossary

geekalert

New Member
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):

AD7269B6-55DA-4DB0-B9B6-4FAC294A4054.jpeg

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!!
 
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.
 
Back
Top