Cards and Lists

Displaying a lot of information on one page has its own unique challenges, and when you consider users' perspectives, well- it gets even more complicated. Some prefer neatly organized blocks of data, others spreadsheets; or put more succinctly - cards and lists.

Enter the Definition List.

Definition lists have the same features as ordered and unordered lists, but with the added benefit of having term/definition pairs. When displaying a set of data with the same terms but different definitions, you can take advantage of this by choosing whether or not to display the terms, creating multiple views. And when you nest multiple definition lists in an unordered list you can further take advantage of the presentation.

With the addition of some advanced styling and a toggle to go back and forth between the views, you can quickly and easily present clean, semantic markup for card and list formats.

the list view in this example works best at a width of around +1200px

1,770 0 22