This package has been deprecated

Author message:

Package is obsolete. Use @olenbetong/ob-react instead.

@olenbetong/color-card

Card component for React with varying colors.

Installation

NPM:

npm i @olenbetong/color-card

import { ColorCard, CardColumn, CardDetail, CardLabel } from '@olenbetong/color-card';

IIFE and ESM builds are available on unpkg.com. For IIFE, the components are available in the global ReactColorCard variable.

<script src="https://unpkg.com/@olenbetong/color-card@latest/dist/iife/color-card.min.js" type="text/javascript"></script>
<script type="text/javascript">
const { ColorCard, CardColumn, CardDetail, CardLabel } = ReactColorCard;
</script>

<script type="module">
import { ColorCard, CardColumn, CardDetail, CardLabel } from "https://unpkg.com/@olenbetong/color-card@latest/dist/esm/color-card.min.js";
</script>

Usage

Coloring

CSS nth-child selector is used to change the color, so cards need to be siblings for the coloring to work.

Components

All components will pass unused properties to the root element. Classes passed in className will be appended to the class list.

• ColorCard - Root component. Takes an "as" property if you need to change the component type. Otherwise will be "a" if "href" is present, or "div" if not.
• CardColumn - Takes a "minor" boolean property to indicate the size. Will be set as a flex container with column direction and justify content space-between.
• CardDetail - Card detail. Label should be passed in the "label" property. "primary" boolean attribute can be set to true to increase font size and set value to bold.
• CardLabel - Card label with colored bullet.

This example creates a basic card that will be created as a Link from @reach/router.

import React from 'react';
import { Link } from '@reach/router';
import { ColorCard, CardColumn, CardDetails, CardDetail, CardLabel } from '@olenbetong/color-card';

const MyCard = props => (
  <ColorCard as={Link} className='mb-2' to={`/manage-something/${props.id}`}>
    <CardColumn minor>
      <CardDetail primary>
        {props.Key}
      </CardDetail>
      <CardDetail label={formatDate(props.SomeDate, 'd. MMM, yy')}>
        {formatDate(props.SomeDate, 'HH:mm')}
      </CardDetail>
    </CardColumn>
    <CardColumn>
      <div className='mb-4'>
        <CardLabel>{Name}</CardLabel>
        <CardLabel>{Accounts}</CardLabel>
      </div>
      <div className='d-flex justify-content-start'>
        <CardDetail label={'Key number'}>{props.KeyNumber1}</CardDetail>
        <CardDetail label={'Other key number'}>{props.KeyNumber2}</CardDetail>
      </div>
    </CardColumn>
  </ColorCard>
);