Name for specific design type instance

Question

So if you look at my little visual example below, the format on top I assume would just be technically referred to as a Grid or Tabular format, but if you were to break each of those rows out and make them their own little beast for different interactions etc, what would you technically call that form of information display? Like a card or an info box or something like that?

PS - I'm sure the question could benefit from a better title or something, but I couldn't think of how to classify the question more suitably so just kept it generic.

Answer 1

I cannot reply as a comment (I miss reputation points to do that). Therefore I write an answer- let's see if it helps you.

In my opinion the "card" name represents it in the best way- a single piece of data that should be viewed as a separate entity. In general, cards of various sorts are very popular on the web nowadays: http://blog.intercom.io/why-cards-are-the-future-of-the-web/

---

Side note:

Splitting the table rows into cards reminded me of the CSS trick I've seen once. Once the width of the screen couldn't handle all the data columns it transformed the table into separate tables for each row and representing the data in exact same way as you did: with label for each data next to it (screenshots and solution taken from: http://css-tricks.com/examples/ResponsiveTables/responsive.php):

Answer 2

This is the most logical name for your data layout for the reasons above, as it displays all of the features/attributes of it.

I would call that a grid-based card layout. It shows attributes of a card, in that is is a small area containing text data, in a grid-based format.