@inthepocket/itp-rcc-card

ITP Card component

Usage

$ npm install @inthepocket/itp-rcc-card

Import (Typescript)

import { default as Card } from '@inthepocket/itp-rcc-card';

Import (ES)

import Card from '@inthepocket/itp-rcc-card/dist/Card';

JSX

<Card size="default">
  <Card.Header>
    <h1>Card Header</h1>
  </Card.Header>
  <Card.Body>
    <h2>Card Body title</h2>
    <p>Card Body content</p>
  </Card.Body>
  <Card.Footer>
    <p>Card footer</p>
  </Card.Footer>
</Card>

Card.Header & Card.Footer are optional.

API documentation

Card

<Card size="default"></Card>

Property	Description	Type	Default	Required
href	Link url	string	-	No
prefixCss	Prefix for css classNames	string	'card'	No
size	default, small or large	string	'default'	No
styles	imported css module (if passed, prefixed classNames will be disabled), see styles property	object	null	No
type	primary, secondary or tertiary	string	'primary'	No
onClick		Function	-	No
target	Link target	string	-	No

Styles property

Property	Description	Type	Default	Required
body		string	-	Yes
bodySizeLarge		string	-	No
bodySizeSmall		string	-	No
card		string	-	Yes
footer		string	-	No
footerSizeLarge		string	-	No
footerSizeSmall		string	-	No
header		string	-	No
headerSizeLarge		string	-	No
headerSizeSmall		string	-	No
link		string	-	No
typePrimary		string	-	No
typeSecondary		string	-	No
typeTertiary		string	-	No

The css module should look like this:

.card             { ... }
.header           { ... }
.headerSizeSmall  { ... }
.headerSizeLarge  { ... }
.body             { ... }
.bodySizeSmall    { ... }
.bodySizeLarge    { ... }
.footer           { ... }
.footerSizeSmall  { ... }
.footerSizeLarge  { ... }
.link             { ... }
.typePrimary      { ... }
.typeSecondary    { ... }
.typeTertiary     { ... }

Body

<Card size="default">
  <Card.Body>
    ...
  </Card.Body>
</Card>

Header

<Card size="default">
  <Card.Header>
    ...
  </Card.Header>
</Card>

Footer

<Card size="default">
  <Card.Footer>
    ...
  </Card.Footer>
</Card>

Development

Installation

$ npm install

Test

$ npm run test

Build

Compiles the TypeScript source to ES5.

$ npm run build