mn-table-list

Table list with a minimalist design

See the demo

Install

npm install --save mn-table-list

And bundle dependencies and main files in dist/ with your preferred tool.

Usage

Just use the class .mn-table-list in a div, and inside of them, .mn-item.

<div class="mn-table-list">
  <div class="mn-item">
    <span>John Snow</span>
    <span>[e-mail]</span>
  </div>
</div>

If you want a header, just use the tag header before items, each title need be h1, h2, ... h6, e.g.

<div class="mn-table-list">
  <header>
    <h2>Name</h2>
    <h2>Email</h2>
  </header>
  <!-- .mn-item's here -->
</div>

Grid system

To setup the flow of itens, we use another module, called mn-layout`, but you can use whatever grid system that you wish.

In example below, we use the classes .mn-layout-column, .mn-layout-sm-row and .flex to define a flex direction to content.

<div class="mn-table-list">
  <header class="mn-layout-column mn-layout-sm-row">
    <h3 class="flex">Name</h3>
    <h3 class="flex">Email</h3>
  </header>
 
  <div class="mn-item mn-layout-column mn-layout-sm-row">
    <span class="flex">John Snow</span>
    <span class="flex">[e-mail]</span>
  </div>
</div>