@olenbetong/linked-card-list

List of cards linked by a vertical line.

Usage no npm install needed!

<script type="module">
  import olenbetongLinkedCardList from 'https://cdn.skypack.dev/@olenbetong/linked-card-list';
</script>

README

@olenbetong/spinner

React component for a list of cards (or other elements) connected by a vertical line.

Installation

NPM:

npm i @olenbetong/linked-card-list
import { Card, List, ListItem } from '@olenbetong/linked-card-list';

IIFE and ESM builds are available on unpkg.com. For IIFE, the components are available in the global ReactLinkedCardList variable, while the ESM build assumes React is available in the window object.

<script src="https://unpkg.com/@olenbetong/linked-card-list@latest/dist/iife/linked-card-list.min.js" type="text/javascript"></script>
<script type="text/javascript">
const { Card, List, ListItem } = ReactLinkedCardList;
</script>
<script type="module">
import { Card, List, ListItem } from "https://unpkg.com/@olenbetong/linked-card-list@latest/dist/module/linked-card-list.min.js";
</script>

Usage

List item can be given a label that will be shown to the left of the vertical line.

<List>
  <ListItem label="18.05.2019, 16:30">
    <Card>
      Card content
    </Card>
  </ListItem>
</List>