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